Lazy Load Inside Container

Blog Projects
JavaScript jQuery Lazy Load
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.



When asking a question include an URL to example page where the problem occurs. Even better is to make a Fiddle which demonstrates the problem. If you have longer code examples please use pastie.org.
CATEGORIES
Built using the awesome Flat UI Pro framework by Designmodo.

Mika Tuupola is a Member of the Leanpub Affiliate Program.

© 2014 Mika Tuupola.