Preloading images

MPaul · 01-08-2004, 07:22 PM

I have images on a page which I want to be loaded before the page is displayed, so that they can be instantly there when the page is loaded. It's sort of hard to explain excatly what I want, but I'll try my best. I've found a lot of scripts about image preloading but they just don't do it. Here is what I'm trying to accomplish. When the page starts loading, and the browser starts reading the script, he should stop rendering the rest of the page, load the images that the scripts tells him to load, and when these are cached, then he should continue rendering the page. With a lot of the scripts I've tried, the page is rendered faster then the images can even be cached. This is why the user still sees the images getting loaded. Is there a javascript command that would make the broswer stop rendering until the images are loaded?

*kitchin* · 01-09-2004, 12:40 AM

No, I think you want to use Flash, or possibly DHTML with a Javascript setTimeout().

Here's a Javascript that does the opposite of what you want, though. You just have to guess how long it's going to take for the images to load. Say I gues 5 seconds. Files needed: wait.jpg, blah0.jpg, blah1.jpg, blah2.jpg. It does not check js version; for that use "if (document.images) { ... }".

Code:

<html><head>
<script language="javascript"><!--
imsmax= 3
ims= Array(imsmax)
for (i=0; i<imsmax; i++) {
  ims[i]= new Image(100,200)
  ims[i].src= 'blah' + i + '.jpg'
}

function loadims() { with (document) {
  // alert('loading')
  for (i=0; i<imsmax; i++) {
     eval( 'ims' + i ).src= ims[i].src
  }
}}
// -->
</script>
</head>
<body onLoad="setTimeout('loadims()', 5000);">
<noscript>Need javascript.<br></noscript>
0:<br>
<img src="wait.jpg" width=100 height=200 name="ims0"><br><br>
1:<br>
<img src="wait.jpg" width=100 height=200 name="ims1"><br><br>
2:<br>
<img src="wait.jpg" width=100 height=200 name="ims2"><br><br>
</body></html>

*Jarrod* · 01-09-2004, 07:47 AM

Couple of other ideas. If we are talking about page 2+ of your web-site you can cause pre-caching by putting the image on page 1, but set the height and width attributes to zero (possibly might need to use 1, which will leave you with a 1 pixel square black dot). That way the image is pulled into the browsers cache when your visitor hits page 1, and then comes in straight away when they visit page 2+.

An alternative way to cause a page render to stutter is put the images within a table, and remove the height and width attributes from your html. I've seen IE (possibly others), delay the page rendering until all the images have downloaded as it just has no idea how much space to allocate to the table.

However, a possible consequence of putting any rendering delay is that you'll loose some visitors. When I hit a page that is taking a long time to download, with no obvious signs of life - not seeing some HTML come back without images is an indication of no life to me - I'm likely to assume that the page is hosted on a server at the end of somebodies 56K modem and go elsewhere for my information.

MPaul · 01-09-2004, 10:22 AM

Yer, I thought about the fact that the page might seem to be hanging for some visitors. Guess i'll have to live with the images loading in front of the visitors.

EDIT: here is the page where I'm trying to pre-load images. The images I want to preload are the ones that do the curved borders of the table
Click here to see the page
Maybe you'll be able to help more. The images are really small, a couple of bytes only.