Jquery lazyload plugin and callback function

Question

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

from my document, I did not find that you can use any callback or not with the lazyload plugin.

suppose my html looks 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 how

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

A busy class simply sets the loaded image in the center of the div. so I need a callback and from the callback I need to determine if the image loading is completed or not, if it is finished, then I just remove the class from the corresponding parent div of the image tag.

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

thanks

Answer 1

I had the same question. There was some search, came here and found the answer. This is wat which i have and works for me:

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

Hope this helps!

Answer 2

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

The problem for me was: Load is also called for note images . Which in my case was a problem. I wanted to add the class only to the last images uploaded. I added this so that it works 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"); } } }); "src") = "data: image / gif; base64, R0lGODlhZABlAIAAAPn5 + QAAACH5BAAAAAAALAAAAABkAGUAAAJ0hI + py + 0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf + DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY / L5 / S6 / Y7P6 / f8vv8PGCg4SFhoeIiYqLjI2Oj4CBnZVQAAOw =="!) { 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 uploaded image is given: image, do nothing, add my class.