在页面加载时运行 jquery 延迟加载而不滚动答案

【问题标题】：Run jquery lazy load on page load not scroll在页面加载时运行 jquery 延迟加载而不滚动
【发布时间】：2013-01-03 18:59:27
【问题描述】：

我正在尝试将jQuery lazy load plugin 与jQuery Isotope plugin 一起使用。事情似乎很好地结合在一起，但是，我很难弄清楚如何修改延迟加载插件以满足我的需求。

插件默认处理滚动事件来触发延迟加载。还有悬停和点击。我希望插件在页面加载时触发。比如说，$(window).load() 完成后的 2000 毫秒。

我知道我可以按照文档创建自己的事件函数，如下所示：

$(function() {          
    $("img:below-the-fold").lazyload({
        event : "sporty"
    });
});
$(window).bind("load", function() { 
    var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000);
});

但是，由于我的无知，我看不出如何使用这个 sn-p 来创建我自己的页面加载事件。

我希望在 $(window).load() 之后延迟加载初始图像，然后当我应用同位素过滤事件时，在填充 DOM 时延迟加载新项目。

非常感谢任何帮助。

【问题讨论】：

代码 sn-p 非常简单。我不太明白你没有得到什么。顺便问一下，你说的“新物品”是什么意思？
上面 sn-p 的语法让我陷入了一个循环，我如何指定我的函数并适当地调用它。至于“新项目” - isotope 在加载页面时隐藏了许多元素。当有人点击过滤选项时，一些隐藏的项目会显示出来并以动画方式定位。
我还是不明白你为什么需要一个循环。我建议你对所有想要延迟加载的图像使用 jQuery 选择器，并将它们绑定到 load 事件，就像在 sn-p 中一样。

标签： javascript jquery lazy-loading jquery-isotope

【解决方案1】：

我制作了一个可能有帮助的延迟加载插件。初始化后，您只需调用$.fn.lazyloadanything('load')，它就会自动加载而无需先滚动。无需定制。看看吧：

https://github.com/shrimpwagon/jquery-lazyloadanything

【讨论】：