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

Automatically begin lazy loading images without waiting for user to scroll down page

本文关键字：用户 等待 滚动 开始 延迟加载 图像      更新时间：2023-09-26

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

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

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

相关文章：