Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Nov 2002
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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
    Code:
    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?

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You could try:

    Code:
    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

  • #3
    New Coder
    Join Date
    Nov 2002
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yea i can't get anything to work..

    i added this snippet of code

    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..

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I guess it just can't be done with your PC....

  • #5
    New Coder
    Join Date
    Nov 2002
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i'm wondering if the .onload() thinks the image is already loaded from initial page load..

  • #6
    New Coder
    Join Date
    Nov 2002
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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..


    Code:
    ...
       setTimeout("checkLoad()",1);
    ...
    
    
    
    function checkLoad() {
         if (user_image.width != 0) {
    	hide_loading_layer();
    	
        } else {
    	 setTimeout("checkLoad()",5);	
        }
    }

  • #7
    New Coder
    Join Date
    Nov 2002
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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..

    Code:
    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 
             }
    }

  • #8
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •