Question

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

问题是我有一个缩略图库，大约有40个小图像，每行10个。如果我加载网站，我可以看到3行图像（总共30个图像）。该插件与其他10个插件相比有奇迹，但我仍然可以同时获得30个HTTP请求。

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

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

以下是插件source code的链接。

Answer 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);
});

Answer 2

如果您只担心请求金额，可以使用Image Sprites捆绑图片。

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

当然这要求

图像是静态的，因此每个用户都可以看到相同的图像或
某种服务器端“Image Sprites”生成器。但不是 Google和Facebook都在使用服务器端“Image Sprites” 生成器捆绑他们的图像

使jquery lazyload插件在视口内工作

2 个答案: