How can I implement lazy loading on a page with 500+ images?

Question

I basically have a booking engine unit results page which must show 40 units and per each unit there's 1 large image of the first thumbnail and an X number of accompanying thumbnail images.

I've been using the jquery lazy load plugin, but it's not thorough enough ( I'm invoking it on DOM Ready ), plus it doesn't really work in IE ( 50% of the clients use IE so it's a big issue ).

What I think I really need to do is not really spit out the image but a fake element such as a span, and possibly modify my code such that if the user views the span, render it into an image element.

<span src="/images/foo.gif">

The booking engine relies on JS so I think I might be forced to just rely on ajaxifying all the thumbnails and have event handlers on window scroll, etc in order for the page to be "usable" and load at an average time ( 2-3 seconds instead of 5-30s on high speed DSL/Cable ).

I'd appreciate any examples or ideas.

Related links/finds which may be useful for solving this:

#1: http://github.com/silentmatt/jquery_lazyload

A fork of the jquery lazy load which seems to solve the IE loading and adds support for containers.

#2: youtube.com sets the src of some of the videos to a 1x1 transparent gif and lazy loads after about the first 10 results or so.

Updates

#1: We decided to make a script to generate thumbnails and do a recursive generation of them. I implemented them. Instead of each of the 570 thumbnail images being 60-120KB they're now 2 KB a piece. Loads a little faster but still slow because of the 570 concurrent requests even though the lazy loader plugin is in place I'm not sure it gets applied fast enough ( even on DOM ready before the images fully load ). Making some progress though.

I'm thinking of just generating 1x1 pixel gifs after the first 10 units and just lazy loading them. Still have to work out a technique though.

Answer 1

Something like this perhaps:

<img lateSrc="/some/image.gif" />

<script>
$(document).ready(function() { 
    $('img[lateSrc]').each(function() { 
        var t = $(this);
        t.attr('src', t.attr('lateSrc')).removeAttr('lateSrc');
    });
});
</script>

Answer 2

How big are the images? An alternative approach might be to download them as one big tiled image then chop it up with css sprites or something similar.

Answer 3

Web browsers are pretty smart at rendering pages efficiently so try this:

1. Make sure you send the pixel size of the images in the HTML so the browser can render the whole page even when the images aren't loaded, yet.

2. Fill up the URLs of the most important images right away (on the server) so the browser loads the images as fast as possible. For all other images, use a placeholder which says "Image is loading..." or something like that.

3. On page-load, replace the placeholders with the real images in the background (load 2-3 images, then run yourself again with a timer waiting, say, 50ms).

You can further optimize step #3 by querying the size of the browser window and then ask the images for their position and only load them if they are visible.