使jquery延迟加载插件在视口内工作

Make jquery lazyload plugin work inside the viewport

本文关键字：视口 工作 插件 jquery 延迟加载      更新时间：2023-09-26

lazyload jquery 插件延迟了长网页中图像的加载。视口（网页的可见部分）之外的图像在用户滚动到它们之前不会加载。

问题是我有一个缩略图库，里面有大约 40 张小图像，每行 10 张。如果我加载网站，我可以看到 3 行图像（总共 30 张图像）。该插件在其他 10 个插件上创造了奇迹，但我仍然一次收到 30 个 HTTP 请求。

可以修改此插件以延迟视口中的图像吗？ 也许成群结队？显示前 10 个，等待半秒钟，显示下一个 10 个，再次等待，依此类推。

附言 Lazyload 可以选择延迟加载所有图像，直到 DOM 准备就绪，但如果像 jquery 或其他脚本加载有时有点慢 - 我会看到一个没有图像的站点。

这是插件源代码的链接。

如果手动向 10 行中的每个图像添加一个类，并为后面的行中的图像添加一个单独的类，依此类推，则可以触发每一行的加载，如下所示：

$(function() {          
    $("img").lazyload({
        event : "timedload"
    });
});
$(window).bind("load", function() { 
    setTimeout(function() { $("img.row1").trigger("timedload")}, 1000);
    setTimeout(function() { $("img.row2").trigger("timedload")}, 2000);
    setTimeout(function() { $("img.row3").trigger("timedload")}, 3000);
    setTimeout(function() { $("img.row3").trigger("timedload")}, 4000);
});

如果您只担心请求量，则可以使用图像精灵来捆绑图像。

例如，您可以将第一行捆绑在一个精灵

中，将第二行捆绑在另一个精灵中，依此类推。这会将您的 40 个请求减少到 4 个！

当然，这需要

    图像
  • 要么是静态的，因此每个用户都会看到相同的图像，要么
  • 某种服务器端的"图像精灵"生成器。然而，两者都不是谷歌和Facebook都在使用服务器端的"图像精灵"生成器捆绑他们的图像
相关文章：