Jquery Lazyload callback

Question

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).

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

Thanks'

Answer 1

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

Edit

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

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

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

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