jQuery Lazyload回调 [英] Jquery Lazyload callback

问题描述

我当前正在使用 jQuery惰性加载，我想知道是否有一种方法可以使当我的容器中的所有图像都结束加载(当延迟加载使他的全部魔力消失时)的回调.

I am currently using Jquery Lazy Load and 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).

这样做的原因是我也在使用 jScrollPane插件，我想调用jScrollPane重新初始化功能.

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

谢谢

推荐答案

从源头来看，延迟加载插件似乎在加载通过已加载图像元素和几个参数的图像后调用settings.load函数:

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

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

编辑

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

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

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

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

这篇关于jQuery Lazyload回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！