Show html images only when the item is being displayed

Question

I saw this on Hulu.com once, but can't get it to behave that way.

The problem is that I have a "marquee" that slides when you click the next button. There are 2 images per section, a total of about 40 sections.

The issue is that the browser loads all 40 * 2 images and it is consuming bandwidth like crazy.

Is there a way to, saw load the images when the "slide" is shown?

Answer 1

Load them in ajax. Look up jquery for that, it's the simplest way.

It also look like you're doing a carousel. Maybe you could use one of the many existing solutions that already handle assynchronous loading of data.