1

当用户向下滚动页面时，网站通常会延迟加载图像，以使最初查看的页面顶部加载得更快。

与其等到用户决定向下滚动页面，是否可以检测顶部图像何时已下载到客户端（或通过缓存图像访问），然后立即开始下载下一组图像？如果是这样，怎么做？

4

1 回答 1

0

请参阅 jsfiddle 中的演示。实现非常简单：第一次收听window.onload，等到整个页面加载完毕。一旦它触发，加载下一个图像并监听它的onload事件。重复此操作，直到不再需要预加载图像：

function loadNext() {
    var img = findNextImageToPreload(); 
    img.load(function () {
        loadNext();
    });
    setImgSrcOnImageSoItStartsPreloading(img);
}

$(window).load(function () {
    loadNext();
});

这只是基本思想，而不是工作loadNext功能。在 jsfiddle 中实现的一个接一个地加载一个图像。如果您希望能够一次加载多个图像，则需要loadNext多次调用。

在任何情况下，您都需要额外检查图像是否在预加载之前滚动/显示。显然你想立即开始加载它。

另请注意，如果图像不可见，某些浏览器可能会避免加载图像。尤其是移动浏览器在某些情况下会这样做。你可以使用deelay.me它。如果所有这些loadNext都在同一秒内运行，那么您需要将图像放置在用户不可见但对浏览器“可见”的地方，以使其逻辑无效。在大多数情况下，我建议不要欺骗浏览器，因为供应商付出了很多努力来使请求合理。不过，很大程度上取决于您的用例。希望这可以帮助。

于 2013-08-08T23:56:37.297 回答