javascript - 在网页上 - 如何显示(轻)图像并在客户端下载后者时将其替换为(重)图像？

Question

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

某个 HTML 页面应该包含一个沉重的图像(例如 - 动画 gif)，但我不想强制客户缓慢地等待它完全下载才能享受一个漂亮的页面，而是我更愿意给他看一个轻量级图像(例如 gif 的第一帧)，当客户端浏览器很容易下载前者时，将轻量级图像替换为重型图像。

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

谢谢!

Answer 1

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

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

您可以使用 this web site将图像文件转换为数据 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)

如果您不想为轻量级图像使用数据 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();
        });
    });
});

---

更新二(自动创建重量级图片元素)

如果您可以从轻量级 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 中删除轻量级图像。