2

考虑到以下情况，我是初学者前端：

某个 HTML 页面应该包含一个沉重的图像（例如 - 动画 gif），但我不想强迫客户在享受漂亮的页面之前缓慢地等待它完全下载，而是我更愿意向他展示一个轻量级的图像（例如 - gif 的第一帧），当客户端的浏览器很容易下载前者时，用重的替换轻的。

解决这个问题的最佳方法应该是什么——我是在寻找技术解决方案还是方法论解决方案？

谢谢！

4

2 回答 2

4

您可以使用数据 URL 嵌入轻量级图像。这将立即显示该图像。

<img src="data:image/gif;base64,---Your-Base64-Encoded-Image-Here---" />

您可以使用此网站将图像文件转换为数据 URL。

然后您需要做的是在后台加载较大的图像，一旦加载，就让它替换轻量级图像。

<img src="data:image/gif;base64,---Your-Base64-Encoded-Image-Here---" />
<img class="heavy" src="http://server.com/path/to/heavy/weight/image.gif" />

以下 CSS 最初隐藏了重量级图像：

/* Don't show heavy-weight images until they're loaded */
img.heavy {
   display: none;
}

以下基于 jQuery 的 javascript 将隐藏轻量级图像并在加载后显示重量级图像：

$(function () {
    // Register handler that will be invoked when a heavy-weight image is loaded
    $("img.heavy").on("load", function () {
        // Hide the light-weight image 
        // (we assume that it is the immediate previous 'img' sibling of the 
        //  heavy-weight image)
        $(this).prev("img").hide();

        // Show the heavy-weight image
        $(this).show();
    });
});

更新（不使用数据 URL）

如果您不想对轻量级图像使用 data-URL，则可以使用类似的方法，在加载轻量级图像之前​​不开始加载重量级图像。

<img class="light" src="http://server.com/path/to/light.gif" />
<img class="heavy" data-src="http://server.com/path/to/heavy.gif" />

重量级图像最初没有加载，因为它没有 -src属性。

以下脚本将在加载轻量级图像后立即开始加载重量级图像（通过复制data-src到src），并最终在加载重量级图像后“替换”轻量级图像。

$(function () {
    // Register handler that will be invoked when a light-weight image is loaded
    $("img.light").on("load", function () {
        // Start loading heavy image (by assigning the src-attribute)
        $(this).next("img.heavy").each(function () {
            $(this).attr("src", $(this).attr("data-src"));
        }).on("load", function () {
            // Show the heavy-weight image and hide the light-weight image 
            $(this).show().prev("img.light").hide();
        });
    });
});

更新 2（自动创建重量级图像元素）

如果您可以从轻量级 URL 派生重量级 URL，那么您可以使用另一种可能更易于使用和维护的方法。

<img class="light" src="img/light/image.gif" />

以下脚本将为每个加载的轻量级图像创建一个新的重量级图像元素。重量级图像 URL 是从轻量级图像 URL 复制而来，但文本light替换为heavy.

$(function () {
    // Register handler that will be invoked when a light-weight image is loaded
    $("img.light").on("load", function () {
        // Create heavy-weight image element after the light-weight image
        // URL is computed from light weight image (by replacing 'light' with 'heavy')
        // The element is initially hidden.
        $("<img/>")
            .attr("src", $(this).attr("src").replace("light", "heavy"))
            .hide()
            .on("load", function () {
                // Show the heavy-weight image and remove the light-weight image 
                $(this).show().prev("img.light").remove();
            })
            .insertAfter(this);
    });
});

一旦加载了重量级图像，此版本还会从 DOM 中删除轻量级图像。

于 2013-06-23T12:58:10.870 回答
0

我可能会使用另一个简单的解决方案，这取决于隐藏的 iframe 用于重图像。加载 iframe 时，它​​将替换轻图像的 src。iframe src 将是重图像的 src。

<html>
<head>
<script>
function replaceImg(imgId,ifrId){
    ifr = document.getElementById(ifrId);
    img = document.getElementById(imgId);
   img.src = ifr.src;

}
</script>
</head>
<body>
<img id="img1" src="../img/initializing.png" />
<iframe id="ifr1" onload="replaceImg('img1','ifr1')" src="http://lorempixel.com/800/400" style="display:none"></iframe>
</body>
</html>

现场演示可以在这里找到。但是，如果您无法注意到浅色图像，请在页面中再次按 RUN 按钮。

于 2013-06-23T13:54:03.403 回答