I wanted to know if there was a way to validate if an image fully preloads before it goes on to the next step within the code... I tried putting in a flag but I don't think it is working...
Preload Function:
var preloaded = false;
function preload() {
if (!document.images) return;
var ar = new Array();
var arguments = preload.arguments;
for (var i = 0; i < arguments.length; i++) {
ar[i] = new Image();
ar[i].src = arguments[i];
}
preloaded = true;
}
Check Preloaded
function checkpreload(){
if (preloaded){
changeImage();
} else {
newImage = "url(images/gfx_photos/loading_image.gif)";
document.getElementById('loading').style.backgroundImage = newImage;
}
setTimeOut(checkpreload(),1000);
}
In the body tag, I have onLoad="preload('imagetoload.jpg');checkpreload(); "
+ So this is what I am wanting this code to do, start to preload an image by calling the preload() function.
+ Next call up the checkpreload() function to see if the image has finished preloading. If so, display the image by calling the changeImage() function. If not fully preloaded, then display a loading image graphic.
+ Every 1 second, call the checkpreload() function to see if the image has preloaded.
The problem, I think, is that the preloaded value is being set to "true" too soon without the image fully preloading...
Is there a way I can validate that the image has preloaded before passing a "true" value to the preloaded variable?
Why am I doing this? Well, for people who have dialup... I want to be able to display the message that an image is loading and then as soon as the image preloads, display it... What happens right now, is that you may get the image loading graphic for a second, then it disappears, you then have to wait an additional 20 seconds before the image actually appears.
Any help would be great!
Thanks!
-SlickVic78