1

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

问题是我有一个缩略图库，其中包含大约 40 个小图像，每行 10 个。如果我加载网站，我可以看到 3 行图像（总共 30 张图像）。该插件与其他 10 个插件相比确实很棒，但我仍然一次收到 30 个 HTTP 请求。

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

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

这是插件源代码的链接。

4

2 回答 2

1

如果您手动为第 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);
});
于 2012-08-14T23:29:32.987 回答
1

如果您只担心请求量，您可以使用Image Sprites来捆绑您的图像。

例如，您可以将第一行捆绑在一个 sprite 中，将第二行捆绑在另一个 sprite 中，依此类推。这将您的 40 个请求减少到 4 个！

当然这需要

  • 图像要么是静态的，因此每个用户看到相同的图像，要么
  • 某种服务器端的“图像精灵”生成器。然而，谷歌和 Facebook 都没有使用服务器端的“图像精灵”生成器来捆绑他们的图像
于 2012-08-17T12:38:31.060 回答