Lazy loading images

I recently found this JQuery plugin that saved my life. I was authoring a Help page that had lots of images in it. Total page load was 5.6Mb.

I had ideas on how to deal with this by hiding content and creating a table of contents that loaded content when it was requested. It was probably going to take some time to put together though. Then I found this plugin - http://www.appelsiini.net/projects/lazyload.

Essentially, it loads a placeholder image in your page instead of the actual image file. You can customise this placeholder and make it look as nice as you want but be sure to keep it as small as possible to ensure page load is slick. Then this script listens on the scroll event and when it finds a lazy image element, it loads the resource from file. I have watched my network resource utilisation in Chrome as the script executes and it's amazing to watch. The page first loads (313Kb in total) and then as I scroll down the page, the total download ticks over ... and over ... and over.

Here are a code snippet. It is a JQuery plugin, so make sure you load JQ before trying to use it.

<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.lazyload.js"></script><script type="text/javascript">// <![CDATA[
	$( function() {
		$("img.lazy").lazyload();
	});
// ]]></script><img decoding="async" class="lazy" alt="" src="img/grey.gif" width="640" height="480" data-original="img/example.jpg" /> <img decoding="async" class="lazy" alt="" src="img/grey.gif" width="640" height="480" data-original="img/example.jpg" /> <img decoding="async" class="lazy" alt="" src="img/grey.gif" width="640" height="480" data-original="img/example.jpg" /> <img decoding="async" class="lazy" alt="" src="img/grey.gif" width="640" height="480" data-original="img/example.jpg" />

So we have lots of images of class lazy with a src of "img/grey.jpg". This is the image that will be loaded for all images. Then, as you scroll down the page, the src reference is replaced with the data-original value and the image is loaded. This continues as you scroll up and down the page.

Til next time ...