How to defer loading images until they're visible?

November 3, 2006 1:15 PM

On a web page, how can I tell if images have not yet been scrolled into view?

I have a large scrollable web page full of small, differing images. I'd like to defer loading the images off the bottom of the currently visible portion of the page until the user scrolls down to see them.

Is there an easy, IE and FF compatible way in which to do this in Javascript?

posted by Neon to Computers & Internet (8 answers total)

You could try something like this. Have your page of images which fills a div. The user can then click a down or up arrow to scroll through them (or you can trap the mouse scroll) and then load them using some ajax-type thing to load the next set.
posted by jesirose at 1:21 PM on November 3, 2006

I'd try something like this:

var allImages = ['firstBigImage.gif','secondBigImage.gif'];
function checkImages() {
for (var i = 0; i < document.images.length; i++) {br> if (document.body.scrollTop+document.body.clientHeight > document.images[i].offsetTop)
loadImage(i);
}
}

function loadImage(i) {
if (document.images[i].src != allImages[i])
document.images[i].src = allImages[i];
}

window.onscroll = checkImages;

Only instead of looping through all images on the page, I'd probably limit this to only the images you want to delay loading, and give each of those images a certain ID or property, like:

<img src=' bigImage=true>

Or something like that. Also, you should probably change the property switch or ID after the image is loaded and only loop through the images that still have the unloaded ID or property.
posted by ducksauce at 2:22 PM on November 3, 2006

That image source tag should contain two empty quotes, not just one.
posted by ducksauce at 2:23 PM on November 3, 2006

Could you perhaps describe why you want to do this? I could understand loading visible images first, but I'm not sure why you would wait to load an image until it's on screen.

Maybe I'm misreading this, but I can't help but think there would be a better way to do what you want for the final result.

(sorry if you've thought through this already)
posted by niles at 2:56 PM on November 3, 2006

Response by poster: The problem is that it takes too long to load the page as it is now, and loading in images as they scroll into view would be an acceptable alternative to having multiple pages, each with a fewer number of images on them.
posted by Neon at 5:18 PM on November 3, 2006

If I visited a web page with the behaviour you're looking for, I'd think the server was overloaded and give up on it.

If they were large images, you could use thumbnails with something like lightbox to load the larger images when clicked. With a ton of small images, I think breaking it up into more pages is a better solution than having people go "WTF?" because parts of the page haven't loaded.
posted by teg at 5:51 PM on November 3, 2006

All you need to do is specify a width and height for each image tag.

The problem is, the browser doesn't know how much screen space each image takes up until it is loaded, so the page can't fully render until the images are loaded. If you specify:

<IMG SRC="foo.jpg" HEIGHT="45" WIDTH="92">

the browser will know how much screen space to allocate, and will complete the rendering of the HTML page quickly, then proceed to load the images as fast as the user's connection will allow.
posted by jellicle at 7:38 PM on November 3, 2006

You really, really do not want to do this.

The user experience would be that the page would never seem to have finished loading. The page would not load any faster this way, and it would seem to load much more slowly (since you only start loading images after the user has scrolled far enough to see them, the whole page will be a constant waiting-for-the-next-image-to-load experience.)

Follow jellicle's advice; he's right. If the html markup is complete, the page layout will be done first and the images will fill in afterwards.
posted by ook at 11:50 PM on November 3, 2006