Pre-Load Images

WiseWizards · #1 (**permalink**) Jun 9th, 2005, 17:36

Hello Members:

I'm sure this is a simple script, but how can you pre-load images when the page loads? I have hover images that I would like pre-loaded so users don't have to wait for the second image to appear on hover.

Thanks & Regards,
Mike

Webforumz Staff · #2 (**permalink**) Jun 9th, 2005, 21:38

Try this:

Code: Select all

    <SCRIPT language="JavaScript">
    <!--

    if (document.images)
    {
      preload_image_object = new Image();
      // set image url
      image_url = new Array();
      image_url[0] = "http://mydomain.com/image0.gif";
      image_url[1] = "http://mydomain.com/image1.gif";
      image_url[2] = "http://mydomain.com/image2.gif";
      image_url[3] = "http://mydomain.com/image3.gif";

       var i = 0;
       for(i=0; i<=3; i++) 
         preload_image_object.src = image_url[i];
    }

    //-->
    </SCRIPT>

You can see the list of images that are preloaded.

WiseWizards · #3 (**permalink**) Jun 9th, 2005, 22:59

Is there a requirement as to if I put it in the HEAD or the BODY?

Webforumz Staff · #4 (**permalink**) Jun 9th, 2005, 23:12

Head.

WiseWizards · #5 (**permalink**) Jun 10th, 2005, 01:52

Thanks!

WiseWizards · #6 (**permalink**) Jun 11th, 2005, 18:49

I tried using your script, and in the HEAD section, but it doesn't seem to work for me...

Here is the script exactly how it appears in my source code along with the URL for you to look at. Maybe it's just my computer?

URL: http://WiseWizards.tripod.com/Develo.../Pictures.html

Source Code:

Code: Select all

<HEAD>
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
if (document.images) 
{ 
preload_image_object = new Image(); 
image_url = new Array(); 
image_url[0] = "Pictures/001_Small2.png"; 
image_url[1] = "Pictures/002_Small2.png"; 
image_url[2] = "Pictures/003_Small2.png"; 
image_url[3] = "Pictures/004_Small2.png"; 
image_url[4] = "Pictures/005_Small2.png"; 
image_url[5] = "Pictures/006_Small2.png"; 
image_url[6] = "Pictures/007_Small2.png"; 
image_url[7] = "Pictures/008_Small2.png"; 
image_url[8] = "Pictures/009_Small2.png"; 
image_url[9] = "Pictures/010_Small2.png"; 
image_url[10] = "Pictures/011_Small2.png"; 
image_url[11] = "Pictures/012_Small2.png"; 
image_url[12] = "Pictures/013_Small2.png"; 
image_url[13] = "Pictures/014_Small2.png"; 
image_url[14] = "Pictures/015_Small2.png"; 
image_url[15] = "Pictures/016_Small2.png"; 
image_url[16] = "Pictures/017_Small2.png"; 
image_url[17] = "Pictures/018_Small2.png"; 
image_url[18] = "Pictures/019_Small2.png"; 
image_url[19] = "Pictures/020_Small2.png"; 
image_url[20] = "Pictures/021_Small2.png"; 
image_url[21] = "Pictures/022_Small2.png"; 
image_url[22] = "Pictures/023_Small2.png"; 

var i = 0; 
for(i=0; i<=3; i++) 
preload_image_object.src = image_url[i]; 
} 
//--> 
</SCRIPT>
</HEAD>

Regards,
Mike

Webforumz Staff · #7 (**permalink**) Jun 11th, 2005, 20:34

Change i<=3 to i<=image_url.length

WiseWizards · #8 (**permalink**) Jun 12th, 2005, 00:20

Is this correct:

Code: Select all

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
if (document.images) 
{ 
preload_image_object = new Image(); 
image_url = new Array(); 
image_url[0] = "Pictures/001_Small2.png"; 
image_url[1] = "Pictures/002_Small2.png"; 
image_url[2] = "Pictures/003_Small2.png"; 
image_url[3] = "Pictures/004_Small2.png"; 
image_url[4] = "Pictures/005_Small2.png"; 
image_url[5] = "Pictures/006_Small2.png"; 
image_url[6] = "Pictures/007_Small2.png"; 
image_url[7] = "Pictures/008_Small2.png"; 
image_url[8] = "Pictures/009_Small2.png"; 
image_url[9] = "Pictures/010_Small2.png"; 
image_url[10] = "Pictures/011_Small2.png"; 
image_url[11] = "Pictures/012_Small2.png"; 
image_url[12] = "Pictures/013_Small2.png"; 
image_url[13] = "Pictures/014_Small2.png"; 
image_url[14] = "Pictures/015_Small2.png"; 
image_url[15] = "Pictures/016_Small2.png"; 
image_url[16] = "Pictures/017_Small2.png"; 
image_url[17] = "Pictures/018_Small2.png"; 
image_url[18] = "Pictures/019_Small2.png"; 
image_url[19] = "Pictures/020_Small2.png"; 
image_url[20] = "Pictures/021_Small2.png"; 
image_url[21] = "Pictures/022_Small2.png"; 
image_url[22] = "Pictures/023_Small2.png"; 

var i = 0; 
for(i=0; i<=image_url.length; i++) 
preload_image_object.src = image_url[i]; 
} 
//--> 
</SCRIPT>

Regards,
Mike

Webforumz Staff · #9 (**permalink**) Jun 12th, 2005, 01:26

Looks right to me.

WiseWizards · #10 (**permalink**) Jun 12th, 2005, 04:01

It still doesn't seem to work for me. It would say in the status bar that it was downloading the images I set to preload, correct? Could you see if anything different comes up on your computer? This is the 4th script I've tried, so I'm starting to think it's either my computer or my web host. Thanks for your patience, though!

Regards,
Mike

Webforumz Staff · #11 (**permalink**) Jun 12th, 2005, 06:53

I don't think it does show in the status that it's downloading them.

Webforumz Staff · #12 (**permalink**) Jun 12th, 2005, 16:41

Try it in IE. Empty the cache and see if the preloaded images work immediately. Catalyst is right that the images do not show in the status bar.

WiseWizards · #13 (**permalink**) Jun 12th, 2005, 16:58

I've already tried clearing cookies, cache, temporary files, etc. I am using Internet Explorer 6.0 and have tried another computer on my network to see if anything different comes up--it didn't.

You say it won't show in the status bar?

Regards,
Mike

Webforumz Staff · #14 (**permalink**) Jun 13th, 2005, 01:27

Code: Select all

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
if (document.images) 
{ 
preload_image_object = new Image(); 
image_url = new Array(); 

image_url[0] = "Pictures/001_Small2.png"; 
image_url[1] = "Pictures/002_Small2.png"; 
image_url[2] = "Pictures/003_Small2.png"; 
image_url[3] = "Pictures/004_Small2.png"; 
image_url[4] = "Pictures/005_Small2.png"; 
image_url[5] = "Pictures/006_Small2.png"; 
image_url[6] = "Pictures/007_Small2.png"; 
image_url[7] = "Pictures/008_Small2.png"; 
image_url[8] = "Pictures/009_Small2.png"; 
image_url[9] = "Pictures/010_Small2.png"; 
image_url[10] = "Pictures/011_Small2.png"; 
image_url[11] = "Pictures/012_Small2.png"; 
image_url[12] = "Pictures/013_Small2.png"; 
image_url[13] = "Pictures/014_Small2.png"; 
image_url[14] = "Pictures/015_Small2.png"; 
image_url[15] = "Pictures/016_Small2.png"; 
image_url[16] = "Pictures/017_Small2.png"; 
image_url[17] = "Pictures/018_Small2.png"; 
image_url[18] = "Pictures/019_Small2.png"; 
image_url[19] = "Pictures/020_Small2.png"; 
image_url[20] = "Pictures/021_Small2.png"; 
image_url[21] = "Pictures/022_Small2.png"; 
image_url[22] = "Pictures/023_Small2.png"; 


for(i=0; i<image_url.length; i++) {
	preload_image_object.src = image_url[i];
	window.status+= image_url[i]; // delete this line
}  
}
//--> 
</SCRIPT>

This will build up a list in your status bar as it loads each image so you know it's happening just delete the marked line once you see that. I also corrected a typo in the code.

WiseWizards · #15 (**permalink**) Jun 13th, 2005, 05:11

Well, I got somewhere...

I replaced the old script with the new one, and I saw the picture URL's in the status bar, but when I hovered over the hover images only the last pre-loaded images actually pre-loaded.

The status bar looked like this:

001_Small2.png002_Small2.png003_Small2.png004_Smal l2.png005_Small

I'm sorry this is such a continuous problem! If we can't figure something out, I dont' REALLY need the script. It would just be more web design like if you know what I mean.

Regards,
Mike

P.S. From my experience in CSS, putting the ";" inside the quotations wouldn't have anything to do with it, would it?

Webforumz Staff · #16 (**permalink**) Jun 20th, 2005, 20:43

So it looks like it's preloaded your images. I'm not sure where the problem still is?

WiseWizards · #17 (**permalink**) Jun 20th, 2005, 23:26

Are you not sure where the problem is in the script or what the problem is in general?

In my browser, only the last image specified in the pre-load script actually pre-loaded. I know this because the hover images other than the last one took around 4 seconds to come up whereas the the last hover image instantly appeared when I placed my cursor over the image.

Any thoughts? If not, like I said, no problem. I guess I'll just have to do without.

Regards & Thanks,
Mike

Webforumz Staff · #18 (**permalink**) Jun 21st, 2005, 05:55

I'm thinking the problem is in your rollover script and not the preloader. Can you post that?

WiseWizards · #19 (**permalink**) Jun 21st, 2005, 06:08

Sure! Here's my hover script:

Code: Select all

[img]Pictures/001_Small.png[/img]

There are 23 of these.

Regards,
Mike

Webforumz Staff · #20 (**permalink**) Jun 21st, 2005, 08:27

Try this instead, it's the preloader/rollover script I use for all my sites.

In the HEAD put (and of course put all 23 images in the list)

Code: Select all

<script type="text/css">
CI = new Array()
aryI = String("001_Small.png,002_Small.png,003_Small.png,004_Small.png").split(",")


for (i=0;i<aryI.length;i++) {
	CI[(i*2)] = new Image()
	CI[(i*2)].src = "Pictures/" + aryI[i]
	CI[(i*2+1)] = new Image()
	hname = String(aryI[i]).replace(".","2.")
	CI[(i*2+1)].src = "Pictures/" + hname
}

function menu(ind,bon) {
	eval('document.images["r'+ind+'"].src = CI[' + ((ind*2)-(bon ? 1 : 2)) + '].src')
}
</script>

Then put each image/link in your page like this:

Code: Select all

[img]Pictures/001_Small.png[/img]

Change the numbers in menu(#, and r# using 1 to 23

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Load Last	fizzgig	JavaScript Forum	5	Sep 20th, 2007 20:07
Getting Div to show on load	pa007	JavaScript Forum	1	Aug 25th, 2007 17:15
Forcing JavaScript to load before images?	JennyChaos	Starting Out	14	Jul 13th, 2007 23:02
How to ensure important images load first?	snappy	Web Page Design	16	Nov 15th, 2006 15:14
HELP!!! Images won't load IE 6	Lilas	Graphics and 3D	1	Dec 23rd, 2005 18:08

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Pre-Load Images