Lazy Load Inside Container

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.

Matthew Crumley contributed nice patch to Lazy Load plugin which makes it work with containers. If you have a container which has a scrollbar.

#container {
    height: 600px;
    overflow: scroll;
}

Images which are not visible are not loaded until you scroll to them. Check demo page for horizontal and vertical scrolling.

To use new feature you can give the container as jQuery object.

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

Mathew also patched a bug where IE was not always loading images. To upgrade download the latest source, minified or packed.

Tagged with: Javascript Jquery Lazy load

Most read tags

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

Google+