How can I implement lazy loading on a page with 500+ images?
- by Fedor
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.
