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'

Alvaro
  • 9,247
  • 8
  • 49
  • 76

3 Answers3

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/

VAShhh
  • 3,494
  • 2
  • 24
  • 37
  • Thanks' I don't exactly get it, I can't figure how to implement it, could you please look this fiddle http://jsfiddle.net/eRyww/ and tell me what I am doing wrong? – Alvaro Jul 09 '12 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. http://jsfiddle.net/eRyww/2/ Thank you very much – Alvaro Jul 09 '12 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? – Matthew Hui Jun 08 '13 at 00: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 03 '15 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 '16 at 11:15
  • For me it worked with this instead: http://stackoverflow.com/questions/26395982/how-can-i-trigger-an-event-after-lazy-load-has-loaded-an-image – Alfergon Oct 20 '16 at 10:23
  • Is this answer still relevant? I seem to just get a console error when using this approach: Uncaught TypeError: e.indexOf is not a function – Nathan Hornby Apr 06 '17 at 14:04
  • Nathan - to me it still works even tho 5 years have passed! had to change the library reference so check http://jsfiddle.net/eRyww/72/ - that seems to work for me. e.indexOf is not a function means that e is not and array, you might want to debug and/or see if your jQuery selector is properly picking up the list of elements you want to lazy load – VAShhh Apr 06 '17 at 16:39
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

Eduard Roura
  • 134
  • 3
  • 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'). http://jsfiddle.net/eRyww/5/. So is there any difference (performance..) between this solution and VAShhh's (as they both work)? Thanks – Alvaro Jul 10 '12 at 08: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 – Eduard Roura Jul 10 '12 at 09:15
  • Well, VAShhh solution also works when applied to img:last http://jsfiddle.net/eRyww/2/ – Alvaro Jul 10 '12 at 09: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. – Eduard Roura Jul 10 '12 at 10:10
  • Yes, it is what I looking for. Both answers work correctly. thank you very much – Alvaro Jul 10 '12 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

shrimpwagon
  • 867
  • 12
  • 23
  • Again; user had a plugin and a particular problem with trying to use it; was not asking for a link to a new plugin – Andrew Barber Mar 05 '13 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. – shrimpwagon Mar 12 '13 at 13:56
  • Thank you for your alternative – Alvaro May 05 '13 at 06:35