Lazy Load With Effects

Latest version of Lazy Load is not a drop in replacement to your webpage. New browsers load image even if you remove the src attribute with JavaScript. Now you must alter your html code. Put placeholder image into src attribute of your img tag. Real image url should be stored data-original attribute.

<img data-original=“img/example.jpg” src=“img/grey.gif”>

Good thing is you can now put all your JavaScript to the end of the page. If you want to support non JavaScript browsers there is an extra step. You must include original image inside <noscript> tag. For more information read the documentation.

You can now add some oomph to your Lazy Loaded images. New effect parameter accepts any jQuery effect. When lazy image is loaded plugin will make it appear using chosen effect. Obviously effects such as fadeOut wont work. Use only effects which make image appear, not disappear.

 $("img").lazyload({
     placeholder : "img/grey.gif",       
     effect      : "fadeIn"
 });

To see code above at work, check fadein demo. Are there any other features you would like to see? Leave a comment.

Tagged with: Javascript Jquery Lazy load

Most read tags

Lazy Load Ruby AVR
Electronics JavaScript
Jeditable Maps jQuery
Facebook HTML5 Lazy Load
Estonia