Menu
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.
392
In the Chrome browser: Right-click any part of the page and select Inspect to see all the HTML from the rendered page.
Rendered HTML is the HTML structure that exists in the client browser after loading a page has entirely completed, including processes that manipulate the original HTML sent from the server.
Response. Once we have an established connection to a web server, the browser sends an initial HTTP GET request on behalf of the user, which for websites is most often an HTML file. Once the server receives the request, it will reply with relevant response headers and the contents of the HTML.
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.
152
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
