Tuning Lazy Loader

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.

I just committed two patches to Lazy Load plugin sent by users. Jeremy Pollock contributed a patch improving scroll behaviour. Before when you scrolled quickly long way down all images above the browser top were loaded. New behavior is to load only those which are currently visible on the screen.

Another patch by Bart Bruil gives additional speed improvements if you alter your HTML. Instead of letting JavaScript remove the src attribute of the image you can remove it already in the code. For example instead of:

     placeholder : "/img/grey.gif"
 <img src="/img/something.png" />

You can now also do:

     placeholder : "/img/grey.gif"
 <img original="/img/something.png" src="/img/grey.gif" />

Normally there is a delay before JavaScript kicks in. This causes some off the screen images to load even though they should be lazy loaded. By altering the HTML this problem does not exist. This also only way to lazy load with Safari (webkit bug #6656). Check the demo page with altered HTML.

I must stress you do NOT have to alter your code. You can still just include the JavaScript file for drop in lazy loading.


Get the latest source or minified.

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.