jQuery延迟加载回调

Question

我目前正在使用Jquery Lazy Load，我想知道是否有一种方法在我的容器中所有图片加载完成后（当Lazy Load发挥全部作用时）进行回调。

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

谢谢。

- Alvaro

Answer 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/

- VAShhh

---

谢谢，我已经花了几个小时才明白，现在你的解决方案看起来非常好。只有一件事，在fiddle容器中应该是$('.p_outer_content')，而不是$('.p_content')，我还添加了img.lazy:last，这就是我一直在寻找的。 http://jsfiddle.net/eRyww/2/ 非常感谢。 - Alvaro

这对我没用。这怎么应该工作？当1像素图像加载时，不应该会触发 .load 吗？ - Matthew Hui

请注意，yourhandler 函数的第一个参数不是元素本身，而是 this，因为 load 函数是以该元素作为上下文调用的。 - Simon

对我来说，使用这个链接可以解决问题：https://dev59.com/K4Tba4cB1Zd3GeqP4VEg - Alfergon

这个答案还有效吗？我似乎在使用这种方法时只得到了一个控制台错误：Uncaught TypeError: e.indexOf不是一个函数 - Nathan Hornby

Answer 2

作为另一种答案，我创建了一个“懒加载”插件，可以实现这一点。它提供了一个回调函数，在所有元素加载完成后执行。它有些不同，不仅适用于图像，而且适用于任何被选中的元素进入浏览器视窗的情况。

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

- shrimpwagon

---

再次提醒：用户遇到了一个插件问题，不是要求提供新插件的链接。 - Andrew Barber

没错，我只是提供一个可行的替代方案。我并不从自己的插件中获利。我在寻找解决自己问题的答案时，发现了很多相同的东西。我提供我的插件作为一种有时更好的选择。我会更加注意我的帖子。谢谢。 - shrimpwagon

谢谢您提供的替代方案。 - Alvaro

Answer 3

为了在最后一张图像加载完成后处理并仅在此时运行代码，您必须使用处理程序函数，正如VAShhh之前所说的那样，与函数调用不同，该函数应该只发送2个参数，因此该函数通过javascript调用语句调用。

然后，您将能够成功检索“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。

- Eduard Roura

---

我看到它在运行，谢谢。出现了与VAShhh解决方案相同的问题，在fiddle容器中应该是$('.p_outer_content')，而不是$('.p_content')。http://jsfiddle.net/eRyww/5/。那么这种解决方案和VAShhh的解决方案之间有什么区别（性能...），因为它们都可以工作？谢谢。 - Alvaro

只有当你想要确定一个方法，在容器中的所有图像加载完成后进行回调时，通过两个参数调用你的处理程序函数，你才能捕获最后一个元素。 - Eduard Roura

嗯，当应用于img：last时，VAShhh解决方案也能够起作用。http://jsfiddle.net/eRyww/2/ - Alvaro

是的，我错了。我想说的是，如果你将函数定义为 yourhandler(elements_left, settings)，那么这是唯一的方法来知道“何时”你正在处理最后一张图片，换句话说：当所有图片都加载完成时，而不是每一张图片（理解这是对话线程的原始情况）。如果这不是你要找的，那就算了，不用理会我的回答。祝好。 - Eduard Roura

是的，这就是我在寻找的。两个答案都正确。非常感谢你。 - Alvaro