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:
$("img").lazyload({
placeholder : "/img/grey.gif"
});
<img src="/img/something.png" />
You can now also do:
$("img").lazyload({
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.
Tagged with: Javascript Jquery Lazy load