0

I am having an issue where my DOM is not displaying when my window.onload (or ) fires. In my actual project, the javascript function I call is gathering quite a bit of data, so I am trying to simply display a splash style screen first. Easy...but it is not working as I expect and I feel I am missing something. I have seen similar questions, but most of them have an 'alert' as part of the testing solution. Anything that breaks the script running allows the DOM to display...so these 'solutions' are not fixing my issue. If I step through the code (IE or Chrome), then all works fine. Here is a sample that reproduces the issue. At least when I run this in Chrome, nothing displays until the 3rd second...then the alert pops and the Loading div shows. In IE, Loading Div does not show until all 5 seconds pass and function completes. Thanks in advance for any thoughts!

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #Loading{
            position: absolute;
            Left: 50px;
            Top: 50px;
            width: 100%;
            height: 100%;
            background-color: yellow;
            display: block;
        }
    </style>
    <script>
        window.onload = Hmm;
        function Hmm(){
            i = 0;
            while (i < 5){
                sleep(1000);
                i++;
                if (i == 3) {
                    alert("hi");
                }
            }
        }
        function sleep(milliseconds) {
          var start = new Date().getTime();
          for (var i = 0; i < 1e7; i++) {
            if ((new Date().getTime() - start) > milliseconds){
              break;
            }
          }
        }
    </script>   
</head>

<body>
    <div id="Loading">Loading...</div>
</body>
</html>
Thunder
  • 1
  • Take a look at [this post](http://stackoverflow.com/questions/588040/window-onload-vs-document-onload) – MX D Oct 14 '15 at 19:38
  • Thanks for the quick note MX D. I have read much like this, but it does not seem to be helping. I have tried window.onload and document.onload and body onload....as well as the jQuery approach...not really seeing any difference in my results. – Thunder Oct 14 '15 at 19:56
  • You should never use while loops to cause the page to lock up. – epascarello Oct 14 '15 at 20:33
  • epascarello...thanks for commenting. Of course this while loop is not for real production...this is for demonstration purposes so that you can run the code and see the results happen. The while loop just wastes some time in js to emulate it doing some task. – Thunder Oct 14 '15 at 20:58

1 Answers1

0

I highly recommend you read Events and Timing In-Depth, now. I'm going to assume your actual project code that's "gathering quite a bit of data" is not written asynchronously, much like your test code here.

Here are a few nuggets of knowledge from the linked article:

Most browsers use [a] single thread for UI and JavaScript, which is blocked by synchronous calls. So, JavaScript execution blocks the rendering.

Events are processed asynchronously with the exception of DOM events.

And lastly, the rendering pipeline is not the same across browsers. Your results will vary.

Community
  • 1
  • 1
Brett
  • 4,268
  • 1
  • 13
  • 28
  • Brett, thank you. I am doing a mix of synchronous and asynchronous...I'll keep that in mind while I read and study this article. – Thunder Oct 14 '15 at 21:01