Lazy load image

[AP81]

Hi,

I have two identical sets of images: the first set is 80x80 pixels, the second set is 320x320 pixels.

What I want to do is display a thumbnail image (80x80), then when you click on the thumbnail, it loads the large image (320x320) in another container on the page.

If I use the 320x320 images as thumbnails (display them sized as 80x80), this works well because they are already cached once the page has loaded. However, if I use the 80x80 as thumbnails, when I load the click the image and try to load the 320x320, I end up with no image. If I click a second time, the image appears as it has completed loading.

I have got this working using Ajax, but would rather do it without using Ajax (as I have been told not to).

Anyone have any idea how to do this? I am guessing that I could display an animated gif whilst doing a loop in the background to check if the image has loaded.

By the way, I can't use lightbox or any other JS framework. Very restrictive!

 

[BillyRayPreachersSon]

Why not use a feature that's been in HTML for a very long time - set the 'lowsrc' attribute of the IMG to load the 80x80, and the 'src' attribute to load the 320x320.

That way, the image is pre-cached, although users will still be downloading the 320x320 even if they don't click on the thumbnail...

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[AP81]

Sounds good, but that was what I was trying to avoid. I only want to load the 320x320 image when clicked (as the page is quite dynamic with a lot of content).

Thanks anyway