Prevent the loading of images [duplicate]

This question already has answers here: Closed 11 years ago.

Possible Duplicate:

Lazy load images when they come into the viewport

How can I prevent the loading of all image data in a long grid of images, but only loading the visible images. The others should be loaded on demand, when the potion of the grid they're in gets within the visible area of th开发者_C百科e screen.

---

There's a number of plugins available for this, for jQuery. It's not a simple thing to implement yourself so I'd suggest using a library:

http://www.appelsiini.net/2007/9/lazy-load-images-jquery-plugin

---

Here is a really good jQuery plugin that you could use as a basis: http://imakewebthings.github.com/jquery-waypoints/

Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

So basically, when you reach the bottom of the page minus X pixels, you could load the next batch of images.