Reasons why I wrote the plugin Jquery Asynchronous Image Loader (JAIL)

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):
a) Disabling JavaScript, the images are not loaded. That was surprising! They didn’t care about progressive enhancement.
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.

You can find the source on Github and the project homepage here.

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.

Tagged: , , , ,

§ 13 Responses to Reasons why I wrote the plugin Jquery Asynchronous Image Loader (JAIL)

  • g2-6725dc7f71487cfe000d2dbb9e5602b8 says:

    stumbled upon this while researching lazyload.. now that lazyload works, is there still a benefit to using JAIL over lazyload?

  • Mike says:

    I am running jquery isotope on a page. The load function on images not yet visible on the screen aren’t loading even with $(‘img.lazy’).jail({
    timeout: 100,
    effect: ‘fadeIn’,
    speed : 1500

    });

    Because isotope changes the div order, the images off screen are still blank after isotope has run. Don’t show up till i scroll down. Is this normal? Any way to load the off screen images after page load.? Thanks for your help. Great plug in.Thank you.

  • Mike says:

    Thanks a lot for developing this! I just tried installing Lazy Load only to find out that all the images load still just like you said. Great work!

  • Aris Blevins says:

    Hi – this looks great, I’m going to try and implement it on a few sites that currently use LazyLoader. Why do you say ‘it’s not supposed to be applied to all the images’? One of our clients is a blog that loads a thumbnail for each post – I’d love to have all of those image be loaded this way, is there some performance problem this might cause?

    Thanks for the great work.

    • sebarmeli says:

      Hi Aris,
      thanks for your comment.
      Well, as I store the images in an array, the performance will tinily decrease if there are more images in a page. Anyway, so far, I haven’t had any issue even on sites with lots of images.
      Hope it helps.

  • Dzmitry ☺ says:

    Beaitiful tool! Thank u very much! U’re great man!!! )

  • For what it’s worth, you can do progressive enhancement with YUI’s ImageLoader just as easily as jQuery… you have to just twiddle around with noscript tags, the same as you do in JAIL. There’s no magic there; in fact it’s somewhat a PITA since you have to include the img tag twice; once for the noscript and once without since there’s no way to access the noscript content with javascript to automagically create the JS version.

  • Dario says:

    Great addon, will add for sure in my website, thanks for sharing it!

  • Narasimman says:

    Abosultely amazing friend

  • This is brilliant. I love all the options. Thanks for your work. I’m surprised the web has tolerated a lack of a good lazy loader for so long.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

What’s this?

You are currently reading Reasons why I wrote the plugin Jquery Asynchronous Image Loader (JAIL) at Sebastiano Armeli's Tech Blog.

meta

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: