...

View Full Version : Help with Image Loading JS Code



H-street
08-26-2004, 07:36 PM
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?

Willy Duitt
08-26-2004, 07:49 PM
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

H-street
08-26-2004, 08:08 PM
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..

Willy Duitt
08-26-2004, 08:13 PM
I guess it just can't be done with your PC.... :rolleyes:

H-street
08-26-2004, 08:14 PM
i'm wondering if the .onload() thinks the image is already loaded from initial page load..

H-street
08-26-2004, 08:38 PM
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);
}
}

H-street
08-26-2004, 10:46 PM
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
}
}

Willy Duitt
08-26-2004, 10:56 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum