Jquery 延迟加载回调答案

【问题标题】：Jquery Lazyload callbackJquery 延迟加载回调
【发布时间】：2012-07-09 00:37:13
【问题描述】：

我目前正在使用Jquery Lazy Load，我想知道是否有一种方法可以在我的容器中的所有图像结束加载时进行回调（当延迟加载使他发挥了所有魔力时）。

原因是我也在使用jScrollPane Plugin，我想调用jScrollPane 重新初始化函数。

谢谢'

【问题讨论】：

标签： jquery jquery-plugins callback lazy-loading jscrollpane

【解决方案1】：

查看源代码，似乎延迟加载插件在加载图像后调用了settings.load函数，并传递了加载的图像元素和几个参数：

if (settings.load) {
    var elements_left = elements.length;
    settings.load.call(self, elements_left, settings);
}

所以你可能只需要这样设置：

function yourhandler(element, el_left, settings) {
    //Whatever you want
    //This function will be called each time that an image (element in this case) is loaded
}
$("img.lazy").lazyload({ 
    load : yourhandler
});

如果您想确保图像已加载，可以将侦听器附加到已加载的图像：

function yourhandler(element, el_left, settings) {
    element.load(function() {  
        alert('Image Loaded');  
    });
}

编辑

尝试代码后，最“干净”的方法是附加到图像的.load 方法：

$('img.lazy').load(function() {
    console.log($(this).attr('src') + ' loaded');
});

$('img.lazy').lazyload({
    container:$('.p_content'),
});

http://jsfiddle.net/eRyww/72/

【讨论】：

谢谢'我不完全明白，我不知道如何实现它，你能看看这个小提琴jsfiddle.net/eRyww，告诉我我做错了什么吗？
谢谢，我花了几个小时才弄清楚，现在您的解决方案看起来很棒。只有一件事，在小提琴容器中应该是 $('.p_outer_content')，而不是 $('.p_content')，我还添加了 img.lazy:last，这正是我想要的。 jsfiddle.net/eRyww/2非常感谢
它对我不起作用。这应该如何工作？加载 1 像素图像时不会触发 .load 吗？
请注意，yourhandler 不接收元素作为其第一个参数，而是接收 this，因为调用 load 函数时将元素作为上下文。
不错的编辑！根据您的第一个解决方案，您尝试侦听加载事件的元素是函数而不是图像

【解决方案2】：

为了处理最后加载的图像并仅在完成时运行代码（所有图像已加载），您必须使用处理函数，正如 VAShhh 之前所说的，不像函数调用应该只发送 2 个参数，所以这个函数使用 javascript call 语句调用。

然后您将能够成功检索“elements_left”参数并将其与 0（零）进行比较：最后加载的图像左侧。像这样的：

function yourhandler(elements_left, settings) {
    var imageNode, container;
    if(elements_left === 0) {
       // All images were loaded.
       // Now do whatever you need with imageNode or its parents (container, etc) in order
       // to run any other Plugin
       imageNode = $(this);
       container = settings.container;
       alert('Ready to continue! Image node is $(this) and container settings.container');
    }
}

请查看此示例：jsfiddle.net/eRyww/4

【讨论】：

我看到它有效，谢谢。与 VAShhh 解决方案存在相同的问题，在小提琴容器中应该是 $('.p_outer_content')，而不是 $('.p_content')。 jsfiddle.net/eRyww/5。那么这个解决方案和 VAShhh（因为它们都有效）之间有什么区别（性能..）吗？谢谢
只有当你想确定“......当我的容器中的所有图像结束加载时进行回调的方法......”使用两个参数调用 yourhandler 函数，你才能最后捕获元素
好吧，VAShhh 解决方案也适用于 img:last jsfiddle.net/eRyww/2
没错，我错了我想说，如果您将函数定义为 yourhandler(elements_left, settings) 是知道“何时”使用最后一张图像的唯一方法，换句话说：when加载所有图像，而不是每个图像（理解它是开始对话线程的原始案例）。如果这不是你想要的，什么都不会发生，忘记答案。问候。
是的，这就是我要找的。两个答案都可以正常工作。非常感谢

【解决方案3】：

作为替代答案，我创建了一个“延迟加载”插件，可以做到这一点。它在所有元素加载后提供回调。它有点不同，不仅适用于图像，而且任何时候选定的元素都会出现在浏览器视图窗格中。

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

【讨论】：

再次；用户有一个插件，并且在尝试使用它时遇到了特殊问题；没有要求新插件的链接
对，我只是提供一个可行的替代方案。我没有从我自己的插件中获利。我正在寻找自己问题的答案，并遇到了很多相同的事情。我提供我的插件作为有时更好的替代方案。我会更小心地考虑我的帖子。谢谢。
感谢您的选择