13

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

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

谢谢'

4

3 回答 3

22

查看源代码，似乎延迟加载插件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/

于 2012-07-09T15:28:38.400 回答
1

为了处理最后加载的图像并仅在完成时运行代码（所有图像已加载），您必须使用处理函数，正如 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

于 2012-07-10T08:38:15.023 回答
1

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

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

于 2013-03-04T21:43:33.490 回答