Preloading Images

Forum Moderators: open

Message Too Old, No Replies

Preloading Images

DougieC

4:19 pm on Sep 19, 2003 (gmt 0)

Does preloading images slow down how fast your page is displayed? I was wondering because I want to preload 30 images of our team in the index page so when a person clicks to see the profile the images will load faster.So if I did this in the index page would it slow down how fast that page is displayed?

Thanks

abbeyvet

4:58 pm on Sep 19, 2003 (gmt 0)

It will slow down how fast the page is loaded obviously but not necessarily how fast it is displayed, depending on how you do it.

I often do it by putting the images just before the closing </body> tag in a tiny size - say 1x1 pixel. That way the rest of the page should load as normal, and only observant users will notice that it is continuing to load for some time afterwards.

But 30 would be a lot - I have only really done it with maybe 2 or 3, more often one.

korkus2000

5:14 pm on Sep 19, 2003 (gmt 0)

Run a javascript function in the onload event handler of the body tag. This will insure that the page has finished loading before the preload starts, and you will not know it is preloading. Here is a common preload function:

function preloadImages() {
if (document.images) {
image1 = newImage("images/nameOfImage1.jpg");
image2 = newImage("images/nameOfImage1.jpg");
}
}

DougieC

5:48 pm on Sep 19, 2003 (gmt 0)

Thanks alot guys.

this is a script I found, would it do the same as yours korkus2000?
<script type="text/javascript">
// <![CDATA[
function loadImage(){
var ImageOver = new Image();
ImageOver.src = "img/peanuts/snoopyOver.gif";
}
// ]]>
</script>
</head>
<body onload="loadImage()">

korkus2000

5:49 pm on Sep 19, 2003 (gmt 0)

Yes that is the same.

Zaphod Beeblebrox

10:53 am on Sep 20, 2003 (gmt 0)

You can also put stuff like
image1 = newImage("images/nameOfImage1.jpg");
image2 = newImage("images/nameOfImage1.jpg");
after the closing body-tag, this will also first load the page, and then load the images.