Help with Image Loading JS Code

Ok i am hoping someone can help me..

i have an image on a website that is loaded from the users selecting certain parameters.. some of these images may take a long time to load so what i wanted to do was have a Loading image appear while the image is loading to indicate that an action is being executed (user feedback)..

anyways i tried code that looks like this but it doesn't work

var loading_image = new Image(750,150);
load_image.src = "/images/loading_image.gif";
var user_image_in;
function load_image(user_image_in) {
document.images[user_image].src = load_image.src
var new_image = new Image(750,150);
new_image.src = user_image_in;
document.images[user_image].src = new_image.src
}


now when i execute that function the loading image never appears even though the user_image may take upto 30-40 seconds to load..

but if i put an alert("check") beween the load_image and the new_image the loading image will load and the new_image will load after i hit OK..

anyone have any ideas or help?

You could try:


var loading_image = new Image(750,150);
load_image.src = "/images/loading_image.gif";
var user_image_in;
function load_image(user_image_in) {
document.images[user_image].src = load_image.src
var new_image = new Image(750,150);
new_image.src = user_image_in;
new_image.onload = function(){
document.images[user_image].src = new_image.src
}
}


.....Willy

yea i can't get anything to work..

i added this snippet of code


user_image.onload = alert("DoneLoading");


now with that i would execpt that it wouldn't do the alert until the image has loaded (upward to 30 second wait)

but it executes the alert as soon as the function is called
it doesn't wait for the image to completely load..

instead it will do the alert() immediately and then finish loading the image..

i believe that has been the issue all along.. which i guess i was under the impression that javascript wouldn't continue the function until the image had been loaded..

I guess it just can't be done with your PC.... :rolleyes:

i'm wondering if the .onload() thinks the image is already loaded from initial page load..

This somewhat works although it is not the best solution.. i also changed it to be a layer that says loading instead of an image..



...
setTimeout("checkLoad()",1);
...



function checkLoad() {
if (user_image.width != 0) {
hide_loading_layer();

} else {
setTimeout("checkLoad()",5);
}
}

I figured it out
you have to wait for the onload before assigning the image.src..

it seems that once you assign the new_image.src to the images it immediately ends the onload() function..


var loading_image = new Image(750,150);
load_image.src = "/images/loading_image.gif";
var user_image_in;
function load_image(user_image_in) {
document.images[user_image].src = load_image.src
var new_image = new Image(750,150);
new_image.src = user_image_in;
new_image.onload = function () {
document.images[user_image].src = new_image.src
}
}

Hmmm;

I believe I said that hours ago when I provided the example you are now using... Good to see you seen the light....

.....Willy