Question

我目前正在使用Jquery Lazy Load，我想知道当我的容器中的所有图像都结束加载时（当懒惰加载完全成为他的魔法时）是否有办法进行回调。

原因是我也在使用jScrollPane Plugin，我想调用jScrollPane reinitialize函数。

感谢

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/

Answer 2

为了处理加载的最后一个图像并且只运行代码并且只有当它完成时（所有图像都加载了），你必须使用你的处理函数，就像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

Answer 3

作为另一种选择，我创建了一个“延迟加载”插件，可以做到这一点。它在所有元素加载后提供回调。它有点不同，并不仅仅适用于图像，但任何时候选定的元素都会进入浏览器视图窗格。

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

Jquery Lazyload回调

3 个答案:

修改