Prevent the loading of images

Question

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 the screen.

score 0 · Accepted Answer · answered Aug 21 '11 at 20:28

0

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

answered Aug 21 '11 at 20:28

Russ Clarke

17,511
4
41
45

From that page "Lazy Load is currently not usable. It does not work with the latest browsers as expected." – Quentin Aug 21 '11 at 20:37
Ah that's irritating, I'll have to update my bookmarks :( – Russ Clarke Aug 21 '11 at 20:39

score 0 · Answer 2 · answered Aug 21 '11 at 20:33

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.

Prevent the loading of images

2 Answers2