Jquery 延迟加载回调

Jquery Lazyload callback

提问by Alvaro

I am currently using Jquery Lazy Loadand I was wondering if there is a way of making a callback when all the images from my container ended loading (when lazy load has made all his magic).

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

The reason for this is that I am using jScrollPane Pluginas well and I would like to call the jScrollPane reinitialize function.

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

Thanks'

谢谢'

回答by VAShhh

Looking at the source, it seems that the lazy load plugin calls the settings.loadfunction after loading an image passing the loaded image element and a couple of parameters:

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

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

So you will probably need to just set something like this:

因此，您可能只需要设置如下内容：

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
});

If you want to be sure that the image is loaded, you can attach a listener to the loaded image:

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

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

Edit

编辑

After trying the code, the most 'clean' method is to attach to the .loadmethod of your images:

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

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

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

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

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

回答by Eduard Roura

In order to process on last image loaded and run code only and only when it's finished (all images loaded), you must use your handler function, as VAShhh told before, unlike the function call should only send 2 parameters, so this function is invoked with javascript call statement.

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

Then you will be able to successfully retrieve the "elements_left" parameter and compare it to 0 (zero): last loaded image left. Something like this:

然后您将能够成功检索“ 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');
    }
}

Please check this example at: jsfiddle.net/eRyww/4

请在以下位置查看此示例：jsfiddle.net/eRyww/4

回答by shrimpwagon

As an alternative answer I have created a "lazy load" plugin that will do just that. It offers a callback after all elements have loaded. It's a little different and not quite just for images but anytime selected elements come into view of the browser view pane.

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

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

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