Geek Answers Handbook

How to find out when HTML is fully displayed

case 1:

I am loading a very large HTML page containing many complex layouts and fonts. The page will take some unknown time to render.

case 2:

I am using the 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 entire screen with a spinner until the page is fully rendered .

In search of answers to this question, I found similar questions, but the answers are not relevant. To be clear:

I do not want to know when the DOM is ready.

I do not want to know when the HTTP data was received.

I want to know when everything in the DOM was completely drawn on the screen .

Setting the worst timeout is not an acceptable solution.

I need a solution for webkit based browsers.

+6
html jquery-ui webkit html-rendering
source share
4 answers

Just a small point; most browsers will not revive the spinner while they process javascript. In particular, IEs that behave very single-threaded.

It is worth using a different, not animated, design for the spinner. Something like an hourglass.

The thought of when this caused the problem: why not put something after the initialization code that you call in your $ (document) .ready event. In the case of IE, it should be the last to fire.

+2
source share

Something like this will 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>
+1
source share

On top of my head, you can 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 are many errors in this:

  • It is assumed that the Image.onload event works as usual (the image is fully loaded and that's it). If Safari is cheating on window.onload, can we trust them with images?
  • It is assumed that the last rule in the CSS file will be executed (and so completed) last. I would suggest that if the last rule is a font or something else, and the second-last rule loads the MB background image, this will not work either.
  • This requires constant attention. Different parts must be updated for different pages. As in the case, it does not scale.

The article you were talking about spoke only about Safari 3. Can we still not trust Safari to download two versions later?

0
source share

For one case, I think you can use:

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

More articles:


All Articles