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

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.

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:

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

Answer 2

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/

Answer 3

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