'How do I know when HTML has fully rendered

case 1:

I load a very large HTML page that includes a lot of complex layout and fonts. The page will take some unknown time to render.

case 2:

I use jquery .html() function to make significant changes to my DOM. The modified DOM will take some unknown time to render.

In both cases, I want to be able to cover the whole screen with a spinner until the page has completely finished rendering.

In searching for answers to this question, I have found similar questions asked but the answers are not relevant. To be clear:

I don't want to know when the DOM is ready.

I don't want to know when the HTTP data has been fetched.

I want to know when everything in the DOM has been completely drawn to the screen.

Setting some worst-case timeout is not an acceptable solution.

I need a solution for WebKit based browsers.

htmljquery-uiwebkithtml-rendering


Solution 1:[1]

Just a small point; most browsers won't animate a spinner whilst they're processing the javascript. Particularly the IEs which behave very single-threaded.

It's worth using a different, non-animated, design for the 'spinner'. Something like an hourglass.

Thought for your when's it rendered challenge: why not put something after your initialisation code which you call in your $(document).ready event. In the case of IEs, it should fire last.

Solution 2:[2]

Something like this should hopefully work:

...
<head>
  ...
  <style type="text/css">
    #overlay {
      background:url(../images/loading.gif) no-repeat 50% 50%;
      display:none;
    }
    .loading #overlay {
      display:block;
      left:0;
      height:100%;
      position:absolute;
      top:0;
      width:100%;
    }
    .loading > #overlay {
      position:fixed;
    }
  </style>
  <script>
    if (document.documentElement) {
      document.documentElement.className = 'loading';
    }
  </script>
</head>
<body>
  ..
  <div id="overlay">
    ..
  </div>
  <script>
    $(document).ready(function() {
      $('.loading #overlay').fadeOut(500,
        function() {
          $(document.documentElement).removeClass('loading');
          $('#overlay').remove();
        });
    });
</body>
</html>

Solution 3:[3]

Just off the top of my head, you could do something like this:

var img_loaded;
$(lastImg).load(function () { img_loaded = true; });

(function checkLoading() {
    return $(lastElement).css("lastProperty") === "value" && img_loaded ? stopLoading() : setTimeout(checkLoading, 50);
}());

Of course, there's a lot wrong with this:

  1. It assumes that an Image.onload event works the way it normally does (the image is completely downloaded and everything). If Safari "cheats" on the window.onload, can we trust them with images?
  2. It assumes that the last rule in the CSS file will be carried out (and so completed) last. I would guess that if the last rule is a font-weight or something, and the second-to-last rule is loading a MB background-image, that won't work either.
  3. It requires constant attention. Different parts have to be updated for different pages. As is, it doesn't scale.

The article you linked to only talked about Safari 3. Can we still not trust Safari's onload two versions later?

Solution 4:[4]

For case one I think you can use:

<BODY onLoad="alert('Page Fully Loaded')">

Solution 5:[5]

Set listeners to the complex HTML elements (that may take some unknown time to render), when each of them has loaded, mark it as done and count it, when the event's count equals to the total of elements, we can confirm that the page has completely finished rendering.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 GlennG
Solution 2 Ian Oxley
Solution 3
Solution 4 Syed Qarib
Solution 5 ling

Related Questions