PreLoad Images handler...

[JVRudnick]

Hello all...
For my image switching, I use a simple (the simplest I could find) javascript routine as follows...



<DIV style="position:absolute;left:0;top:156;width:370;height:30;z-index:2;visibility:visible;">
<a href="about.html"><img src="images/aboutOFF.jpg" width="159" height="63" border="0" name="i2" alt="About Us"
onMouseOver="if (document.images) document.images['i2'].src='images/aboutON.jpg'"
onMouseOut="if (document.images) document.images['i2'].src='images/aboutOFF.jpg'">
</a>
</div>



But using this, I have noted a delay in the switching. Is there a simple pre-load function that someone could point me to, to make the switch a little quicker?

Jim Rudinick

[ez4me2c3d]

place this in your heading under some script tags...
if (document.images) {

anyname1 = new Image();
anyname1.src = "file.jpg";

}
anyname1 = this is just a fake name to create an object.. means nothing.

this will tell JS that 'anyname1' is a new image object. assigning a file to it's 'src' will force the browser to go find the file and when it does it will cache that image. if you want more images to be preloaded then copy those two lines for each image, but change anyname1 to like anyname2 and anyname3 etc...

to test if this works, upload your new page (obviously), then go into the browser settings and delete all temporary interent files. look at you rfolder and you shouldn't see any images (or any files really). goto you web page that you are testing but dont trigger anything that would cause the images, that we are trying to preload, to show. now go back to the folder you have your temporary internet files in and you should see the images we preloaded in there (in additon to some other images).

this was tested on IE6

[JVRudnick]

Hi...
did just that, and I DO NOT see the image preloaded. once I roll over same, yup, it pops up...but not until then. Here's the script I used...



<script language="javascript">

if (document.images) {

anyname1 = new Image();
anyname1.src = "regON.jpg";


}
</script>


Shouldnt' this work?

Jim

[ez4me2c3d]

hmm, yeah that looks, right. like i said i tested the code in IE6 and it worked.

a cheaper less friendly way you can do it is to place the image tags some where on yoru page with a wdith and height value of 1. like so:<img src="filename.jpg" width="1" height="1">that will place a 1 pixel dot on your page but its the sure fire way to preload.

[zoobie]

Actually, I just tried it locally and couldn't find the files either.

We can't use 1 x 1 anythings because the search engines view this as spam. :D

[JVRudnick]

so....

if the method given doesn't work (i'm using IE6 too?) and the 1x1 is SPAM..

how do the rest of you preload images?

???

[ez4me2c3d]

no it does work, i have tested it in IE6 on my own site. I do not know you are experiencing problems.

[JVRudnick]

Okay...
here's my code segment...



<script language="javascript">

if (document.images) {

anyname1 = new Image();
anyname1.src = "aboutON.jpg";
}



And here's the button rollover handler...



<a href="about.html"><img src="images/aboutOFF.jpg" width="159" height="63" border="0" name="i2" alt="About Us"
onMouseOver="if (document.images) document.images['i2'].src='images/aboutON.jpg'"
onMouseOut="if (document.images) document.images['i2'].src='images/aboutOFF.jpg'">
</a>



My thinking is that as the image aboutOFF.jpg is the button that is loaded first -- then the user rollsover that button -- which then should switch with aboutON.jpg. So, the aboutOFF.jpg is loaded first...and I'm looking on how to load the aboutON.jpg.

Is this methodology correct?

IF so, then in IE6, I followed the instructions carefullly, 3 times. I flushed the cache; watched as the page loaded (and saw that correctly, the aboutOFF.jpg loaded fine) -- and awaited the preloading of the aboutON.jpg. THIS DID NOT HAPPEN, any of the 3 times I tried. Once I did rollover the button, then yes, the aboutON.jpg image was shown, and yes it then appeared in the cache window.

So...what am I still doing wrong?

and NOTE...that I am 'naming' the image I2 in the rollover handler..might that affect the preload script?

Jim

[zoobie]

Well, have you tried putting your page on the internet? Perhaps the script causes the looking in the temp internet folder and if you're not actually on the net, it's just loaded into another IE (local) folder for display.

[ez4me2c3d]

you have..

anyname1.src = "aboutON.jpg";

but in the bottom you show you have your images in a folder called images...

<img src="images/aboutOFF.jpg" width="159" height...


the script isn't lookin gin the right directory for the image