04/01/2011 § 13 Comments
The need for a plugin that loads images asynchronously comes from the will of improving the page load time and making the user experience enjoyable/acceptable when there are heavy images
in a page. When there are images on a page, the browser makes HTTP requests to download them and in case there are many of them and they have
large size, it can take a while to load the rest of the page. The user will see the content below the images with some delay and the user experience won’t be that pleasant.
In mobile sites, I find this problem quite critical, as the user will especially feel the effects of this delay.
Deferring the loading of the images can be the solution and that’s what my plugin is about.
Before to have started writing it though, I researched on the net if there was something already that could solve my issue. Well, of course someone else has already thought about this problem and has already implemented something good. That’s what I found:
– YUI ImageLoader Utility : utility from YUI3, that delays the loading of the images and
lets you determine triggers and time limits to initiate image loading. You can find more info on their web page and I believe it’s a great utility (like all YUI3 library great code as well)
This utility requires some HTML change, such as leaving out the “src” attribute from the IMG tag.
There are few things about this solution that weren’t good for my purpose though (in order of importance):
b) I can customize a trigger to load the images, but I can’t customize a callback function after the images are loaded.
c) I’ve already got jQuery in my page, I’d like not use another JS library for page performance reasons. (other JS code to download)
– Lazy Loading Plugin for jQuery : plugin for jQuery written by Mika Tuupola.
This solution was respecting the progressive enhancement and was solving above a) and c)! It seems the way to go.
Just a couple of things go bad:
a) In the homepage it’s clearly written that the plugin is currently not usable.😦
b) Refreshing the demo page with the Net tab of Firebug opened, the images “below” the fold are loaded.
So something must go wrong at least in my browser FF 3.6 on Mac.
I decided to take notes from this previous solutions and in order to achieve what I needed for the site I was working on, I wrote my own plugin for jQuery, called
JAIL aka Jquery Asynchronous Image Loader. The whole solution respects the concept of progressive enhancement, you can customize a callback function and it requires jQuery of course.
It’s lightweight (compressed version is 4Kb), it’s licensed under MIT and GPL v3 and it’s been tested with jQuery 1.3.2+ on FF2+, IE6+, Chrome5+, Opera 10+, Safari3+.
Just some quick notes, this plugin is not for all the cases and it’s not supposed to be applied to all the images. It required some HTML changes so you need to be able
to modify the HTML, and I’d suggest to use it for “heavy” images and for mobile sites.
UPDATE (19/12/2011) : Version 0.7 released. Added support for ‘offset’ configuration
UPDATE (03/04/2011) : Version 0.8 released – jail() function, fixed critical issue on v0.7, resizing function, scrolling fixes
UPDATE (03/08/2011) : Version 0.9.5 released – Issue 14 fixed regarding applying event on container different from ‘window’, filenames changed.