12

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'

3 Answers 3

21

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/

8
  • Thanks' I don't exactly get it, I can't figure how to implement it, could you please look this fiddle jsfiddle.net/eRyww and tell me what I am doing wrong?
    – Alvaro
    Jul 9, 2012 at 15:43
  • 1
    Thanks, I've been several hours to figure it out and now your solution looks great. Just one thing, in the fiddle container should be $('.p_outer_content'), not $('.p_content'), and I also added img.lazy:last which is what I was looking for. jsfiddle.net/eRyww/2 Thank you very much
    – Alvaro
    Jul 9, 2012 at 16:16
  • 1
    It didn't work for me. How is this supposed to work? Wouldn't .load fire when the 1 pixel image is loaded? Jun 8, 2013 at 0:57
  • Note that yourhandler doesn't receive the element as its first argument but as this because the load function is called with the element as the context.
    – Simon
    Mar 3, 2015 at 12:11
  • Nice EDIT! in accordion to your first solution the element that you're trying to listen load event was the function and not the image
    – Andrea_86
    Sep 16, 2016 at 11:15
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

5
  • I see it working, thanks. There was the same problem as VAShhh solution,in the fiddle container should be $('.p_outer_content'), not $('.p_content'). jsfiddle.net/eRyww/5. So is there any difference (performance..) between this solution and VAShhh's (as they both work)? Thanks
    – Alvaro
    Jul 10, 2012 at 8:57
  • Only if you want to determine "...a way of making a callback when all the images from my container ended loading..." calling yourhandler function with two parameters you will be able to catch last element Jul 10, 2012 at 9:15
  • Well, VAShhh solution also works when applied to img:last jsfiddle.net/eRyww/2
    – Alvaro
    Jul 10, 2012 at 9:21
  • True, I was wrong I wanted to say that if you define function as yourhandler(elements_left, settings) is the only way to know "when" you are working with last image, in other words: when all images are loaded, not each one (understand it is the original case that started the thread of conversation). If that was not what you were looking for nothing happens, forget the answer. Regards. Jul 10, 2012 at 10:10
  • Yes, it is what I looking for. Both answers work correctly. thank you very much
    – Alvaro
    Jul 10, 2012 at 10:31
1

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

3
  • Again; user had a plugin and a particular problem with trying to use it; was not asking for a link to a new plugin Mar 5, 2013 at 20:54
  • 1
    Right, I'm just offering an alternative which will work. I'm not profiting off of my own plugin. I was searching for answers to my own problems and came across a lot of the same thing. I'm offering my plugin as a, sometimes better, alternative. I'll be more careful with my posts thought. Thank you. Mar 12, 2013 at 13:56
  • Thank you for your alternative
    – Alvaro
    May 5, 2013 at 6:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.