Question

当用户向下滚动页面时，网站通常会延迟加载图片，以允许页面的初始查看顶部加载更快。

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

Answer 1

See demo in 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都在同一秒运行，那么您需要将图像放置在用户不可见的某个位置，但是对浏览器“可见”以使其逻辑无效。在大多数情况下，我建议不要欺骗浏览器，因为供应商花了很多精力来使请求合理。在很大程度上取决于你的用例。希望这会有所帮助。

自动开始延迟加载图像，而无需等待用户向下滚动页面

1 个答案: