I just thought this might be useful - short little pre-loading of images on webpage.
Code:
<body onload="preImages()">
<script>
function preImages(){
if (document.images){
aImgSrc = new Array("image1","image2","image3");
aImgLst = new Array ();
for(counter in aImgSrc){
aImgLst[counter] = new Image();
aImgLst[counter].src = "images/" + aImgSrc[counter] + ".jpg";
}
}
}
</script>
Skyzyx
06-13-2003, 04:19 PM
Here's another simple one:
var myImg = new Array('../img/title.gif', 'menu.gif', '../img/logo.gif', etc.);
var myImgLen=myImg.length;
for (var i = 0; i < myImgLen; i++)
{
var tmp = new Image();
tmp.src = myImg[i];
}
Ah, always yet another way to look at it - thanks.
The only reason for the 'if (document.all)' is to ensure that the browser does not err. if it does not support it - If the browser version is known, the function can become quite a bit smaller.
I have the code calling the function from the body tag, to only start loading the images after the page has been loaded, therefore necessitating putting the code in a function.
If all the extensions of the files are the same, it is easier to only put the name in the array and add the extension to the 'src' assigning line:
/**/
var myImg = new Array('../img/title', 'menu', '../img/logo', etc.);
tmp.src = myImg[i] + '.gif';
/**/
beetle
06-17-2003, 03:39 PM
Originally posted by Skyzyx
Here's another simple one: I don't think so. To the best of my knowlege, for loops don't introduce their own scope, so the variable tmp is overwritten at each iteration - certainly before the image you call can be loaded. So that effectively will preload only the last image. An array is needed to correctly preload each image. If you want to test it, just add this line after assigning the src property
tmp.onload = function() { alert( this.src ) };
I should note that preloading is beneficial only if you use the image objects you create during the preloading later on. Preloading images as JSObjects will give little-to-no benefit in speeding up the loading of images in your HTML, nor will they help image swaps (such as rollovers, a common use for preloading) unless you use those JSObjects in the swapping script.
Yes, I do agree with most of what you said. I have to say though that I do not use the array to swap my images later - my images get preloaded. They get downloaded to the temporary internet files and are recognised by IE when changing the images with another script.
I am not too sure if I perhaps didn't understand you correctly ;- D
beetle
06-17-2003, 05:55 PM
yes - you understood me correctly. And you are right - IE will pull the image from the temp files.
But - ever notice how if you leave a page up for a while, then try to use the rollovers? They are pulled from the server again. You get MUCH better performance from images swaps if you use the JSObjects that you preloaded the images into.
Skyzyx
06-17-2003, 09:12 PM
Looking at it again, it would seem you were right. How 'bout this:
var tmp=new Array();
var myImg = new Array('../img/title.gif', 'menu.gif', '../img/logo.gif', etc.);
var myImgLen=myImg.length;
for (var i = 0; i < myImgLen; i++)
{
var tmp[i] = new Image();
tmp[i].src = myImg[i];
}
