Menu
I have a long-running report and want to show a wait-spinner to the user while it's generating. I have made this work already but am not sure I'm doing it the best or right way.
This is using ColdFusion but it could be any language I guess. At the top of the page, I have some Javascript (jQuery) that shows a wait-spinner plus there's a documentReady handler where I take the spinner down. I flush the output ( if it matters) and then the rest of the code works on the report contents. This wasn't ever rendering the spinner and I theorized that, even though I was flushing things on the server, some buffering was happening along the way and the browser never saw the spinner code until too late. So, I added a loop right before I flushed that spit out a few hundred lines of HTML comments. After fine-tuning the number of lines, that did the trick. I assumed then that that's how other sites did it too.
But: Today, while watching a different page of mine that spits out a line by line status of a long-running job, it occurred to me that that page flushes after each line and the browser renders that incrementally as desired. This doesn't match my conclusion from above and now I don't know what the rules are. Is there a predictable way to do this? Does it vary per browser?
CLARIFICATION: I appreciate the answers that attempt to explain the correct way to do a wait-spinner but I'm just using a wait-spinner as an example to illustrate my real question: are there reliable ways to predict when browsers will start to render HTML as it is streamed to them over the net? It's obvious through observation that browsers don't wait for the /html tag to start work. This question doesn't necessarily have anything to do with Javascript. For instance, that second page I describe that shows status is pure HTML.
661
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.
When a web page is loaded, the browser first reads the HTML text and constructs DOM Tree from it. Then it processes the CSS whether that is inline, embedded, or external CSS and constructs the CSSOM Tree from it. After these trees are constructed, then it constructs the Render-Tree from it.
It is well known that different web browsers display (or render) HTML documents slightly differently. Each browser has its own way of interpreting HTML tags and drawing them on the screen. This is, of course, what makes browsers different, because their entire purpose is to interpret and display HTML.
TLDR; Parsing and Rendering turn the HTML content into a web page with colors and backgrounds and pictures.
Other than the built in delay for Firefox, there are other areas which cause the browser to wait before rendering.
As an html page is sent to the browser it first has to decide where things go before it can draw the screen. For example, tables are notorious for causing rendering delays. In order to draw a table the browser needs to compute column sizes. If you use percentages as column widths or don't specify them at all, then the browser has to get the entire table before rendering.
However, if you use something like the table-layout: fixed; css attribute then the browser can just read the first row and start drawing as data is fed to it.
Other tags can cause similar issues. Basically any time the browser has to compute the size of content, then it has to have all of the content to render. If you can give it hints ahead of time through the use of fixed size (width/height) elements then the browser doesn't need to figure anything out and it can draw the elements as they are downloaded.
As a self-imposed rule, I never let the browser determine anything. Instead I give my elements fixed sizes. As a result the sites I work on usually have lightning fast rendering.
37
If I understand you correctly, you want a "loading"-image to display whilst page is still loading up content.
What I do, and what I believe is best way is to add a div-tag at top of your page, closest to body-tag which holds the loading image/text. You can place this div elsewhere with help of some css.
Then have Jquery remove this div when page is loaded. Instead of using $(document).ready as some have recommended i would use $(window).load instead, since it is activated when the complete page is fully loaded, including all frames, objects and images.
Se link here; http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/
Example;
<body>
<div id="loading" style="z-index:200; width:100%; height:40px; border-top:2px #D4D4D4 solid; background:#E8E8E8; color:#000; position:fixed; bottom:0; left:0;">
<div align="center">
<img src="load.gif" alt="Loading...">
</div>
</div>
<script type="text/javascript">
$(window).load(function() { $("#loading").remove(); });
</script>
[...]
...
174
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
