Jquery lazyload plugin and callback function

Question

i download jquery lazyload plugin from this site http://www.appelsiini.net/projects/lazyload.

from their doc i have not found that one can use any callback or not with lazyload plugin.

suppose my html look like

<div id="gallery" class="busy"><img src="blah.jpg" /></div>
<div id="gallery" class="busy"><img src="blah2.jpg" /></div>
<div id="gallery" class="busy"><img src="blah3.jpg" /></div>

my script like

$("#gallery img").lazyload();

class busy will just set a busy image at the center of div. so i need a callback and from the callback i need to detect image download completed or not if completed then i just remove the class from corresponding parent div of image tag .

so please show me the way to implement callback with lazyload and also need sample code by which i can remove the class from corresponding parent div of image tag .

thanks

ur html markup is wrong, ID has to be unique for different divs — Shadow_boi
– Shadow_boi, Commented Dec 19, 2011 at 6:29
i asked different issue that is there any callback function which fire everytime when download complete of each images? — Keith Costa
– Keith Costa, Commented Dec 19, 2011 at 7:42

Rick de Graaf · Accepted Answer · 2015-02-13 14:29:35Z

12

I had the same question. Did some searching, came here, and found the answer. This is wat I have, and works for me:

$(this).lazyload({
    effect : 'fadeIn',
    load : function()
    {
        console.log($(this)); // Callback here
    }
});

Hope this helps!

edited Feb 13, 2015 at 14:29

answered Aug 27, 2012 at 15:56

Rick de Graaf

9581 gold badge14 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dnns Over a year ago

Wonderful! Works smoothly.

Leopold Kristjansson · Accepted Answer · 2014-04-17 16:30:14Z

Rick de Graaf's answer almost did it for me.

The problem for me was: Load gets called for the placeholder images as well. Which in my case was a problem. I wanted to add a class to the final loaded images only. I added this to make it work for me:

jQuery("img.lazy").lazyload({   
            effect : 'fadeIn',
            load : function()
            {
                if ( jQuery(this).attr("src") != "data:image/gif;base64,R0lGODlhZABlAIAAAPn5+QAAACH5BAAAAAAALAAAAABkAGUAAAJ0hI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBnZVQAAOw==") {
                    jQuery(this).addClass("visible-image");                 
                }
            }
        });

If the loaded image is the data:image, don't do anything, else add my class.

Collectives™ on Stack Overflow

Jquery lazyload plugin and callback function

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related