Text 30 Jun Lazy Image Loading

While researching some methods of lazy-loading images, I came across the following plug-in by Mika Tuupola which is based on the ImageLoader utility of the YUI library. A few different things don’t sit right with me with these existing solutions:

  1. The jQuery plug-in would seem to require that it be included in the <head> of the page. Otherwise, the DOM would be well on its way to being in a loaded state (images and all) before the plug-in even gets fired. Another consideration is that not all website frameworks that we work with will allow this amount of flexibility of picking and choosing where and how your scripts are included. Finally, you are also now committing to loading jQuery in the header of your document. Certainly the extra HTTP requests and blockage of parallel downloading aren’t likely to slow down your page as much as extra images might, but this is still not a perfect solution.
  2. The jQuery plug-in seems to be aborting the requests for the images, which means that those HTTP requests are still being fired.
  3. The YUI loader states that you should omit the “src” attribute. Not only is this extremely backwards to have the behavior dictate your markup, ignoring any consideration for progressive enhancement, but it also hurts accessibility and creates markup that will fail W3C markup validation. Devices with JavaScript disabled will not be able to view these images, nor will any type of feeds be able to pull the images down.

Alternate Solution

Where does that leave us? Before that, let’s revisit some of the goals that we’ve just established:

  1. Sites need control over which images are loaded immediate and which images have delayed loading. Images which are delayed should not make any HTTP requests (even if they are aborted).
  2. Images should be accessible without a dependency on JavaScript (feed-friendly too).
  3. Allow JavaScript to be included at bottom of page.
  4. Site must retain valid markup.

As it turns out, images which are included within the <noscript> tag will not be requested by the browser if JavaScript is enabled. Knowing this, we can use jQuery to read the contents of all <noscript> elements on the page and replace them with the image tags that they are wrapping. One caveat on this, however: browsers seem to interpret the content of the <noscript> tag as plain-text, and I was seeing “&lt;” and “&gt;” when trying the following code:

$('noscript').each(function() {
    $(this).replaceWith($(this).find('img'));
});

The solution was to create a placeholder jQuery element:

$('noscript').each(function() {
    var newMarkup = $($(this).find('img'));
    $(this).replaceWith(newMarkup)
});

Cons

  1. Increased Markup: This actually isn’t as big of a problem until you hit a threshold of about 200 delayed images. After this point, the extra bytes generated will add up to just a little bit more than the size of the minified version of Mika’s plug-in.
  2. Maintainability: The JavaScript plug-ins grant a lot of flexibility in specifying where and how much of the images get loaded. This can still be done, but requires that logic to now be ported over into something like PHP.

    Design crafted by Prashanth Kamalakanthan. Powered by Tumblr.