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 2 of 2

Thread: loading img

  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    7
    Thanks
    0
    Thanked 1 Time in 1 Post

    loading img

    so i want a loading img to display when a javascript function is called and be hidden when the function finishes. the function takes a bit of time (anywhere from 1 sec to 10 secs usually), so i don't want the user to think nothing is happening. below is the relevant code. the first snippet sets up the loading img and a label for it. the second and third snippets are at the beginning and end of the function (respectively) and turn visibility on and off (respectively). for some reason, it can't ever see it turn on. a reasonable enough amount of time is elapsing such that i expect to see it. any ideas?



    <div class="data">
    <img id="loading" src="pics/loading.gif" style="visibility: hidden" />
    <label id="loading_lbl" style="visibility: hidden"> &nbsp; Loading...<label>
    </div>


    document.getElementById("loading").style.visibility = "visible";
    document.getElementById("loading_lbl").style.visibility = "visible";

    document.getElementById("loading").style.visibility = "hidden";
    document.getElementById("loading_lbl").style.visibility = "hidden";

  • #2
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    The problem is that you are not calling the code in between using ajax.
    When you use ajax you can run more than one process in parallel while if you do not use ajax the process are in a row.

    And the rotating image is a process by itself.

    So you should display the image at the beginning of your function and hide when the ajax.readyState becomes == 4.

    Other than that the image will show but will not turn.


  •  

    Posting Permissions

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