SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript loading screen while executing code (IE)

    I've run into a roadblock I just can't seem to get past. I'm developing a website for work (internal) and I have a lot of javascript calculations going on when someone enters data. What I want to do is to have a div apear when it begins calculating and goes away when it ends. I'm using:

    // CSS code
    div.loading-invisible{ display: none; }
    div.loading-visible { display: block; ... various formatting here ... }

    // Javascript

    function calculate(evalForm) {
    document.getElementById("loading").className = "loading-visible";

    ... calculations ....

    document.getElementById("loading").className = "loading-invisible";

    }

    // HTML code
    < div id="loading" class="loading-invisible">
    <p><img src="spinner.gif" /> Calculating... </p>
    </div>

    ....


    <div class="question"> option < input type="checkbox" name="choice" onclick="calculate(this.form);" /> </div>


    Something like that. It works great in firefox. The div display appropriately, calculates, then disappears when it's finished. However, in IE it seems to want to calculate everything before anything is displayed. I placed alerts in the code to be able to pause it mid way and it worked. But without alerts it just hangs while everything is being calculated and the code for the loading screen just seems to cancel itself out. I attempted to put some waits in the code such as:

    setTimeout("newFunctionForCalc()",1250);

    and

    while (document.getElementById("loading").className != "loading-visible") {}

    still no dice in IE, but works flawless in firefox.

    Any advice?

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My understanding is that browsers make little/no guarantee when a dom change will be visually rendered. Think of it as there being 2 layers...the dom, and the browsers rendering engine(which reads the dom when it wants to repaint). Changing the dom, should update it immediately, so that future reads of dom values are correct, but they may not reflect what is currently rendered.

    I would be really surprised though, if this didn't work the vast majority of the time
    Code:
    document.getElementById("loading").className = "loading-visible";
    setTimeout(function(){
        calculate();
        document.getElementById("loading").className = "loading-invisible";
    }, 20);
    a timeout of 20 just means "no sooner than about 20ms". The browser is free to take longer than 20, so that it can address more important jobs, like rendering, or handling events.

    Maybe someone can confirm my assumptions.

  3. #3
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dude, you are awesome. That worked! This has been bugging me since Sunday.

  4. #4
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have a follow-up to this. It isn't exactly something that's necessary to fix, but a nice little thing to polish up the project.

    But when I get the loading screen in IE I have an animated GIF (just something spinning) but it isn't animated when the div becomes visible. However, in Firefox it works correctly.

    Thoughts?


Bookmarks

Posting Permissions

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