Javascript embed code that doesn't halt page rendering

Question

I'd like to embed a number from another page. The remote call is small (only returns a number) but I would like the page to keep loading while the request is out. How should I do it? I'm currently doing

<span id="target">Loading ...</span>
<script>
var cb = function(data) {
    document.getElementById("target").innerHTML = data; 
}
</script>
<script src="http://webnumbr.com/webnumbrs.latest.json(callback=cb)"&gt;&lt;/script&gt;

I'm open to client side or server side changes. Just the least code for the client embed the better

Answer 1

I believe you are using AJAX to load the content from other page on loading the current page, make sure that your AJAX call is asynchronous, and update the "webNumbr_webnumbrs" control only after successfull completion.

Answer 2

The "official" recommendation (see rules) is to put all JavaScript at the very bottom of the HTML file. The contents of every tag will be evaluated before rendering continues, as the outcome of the script might affect further rendering (think of document.write()).

Answer 3

Honestly,

I think the best way may be to simply put it in an onLoad() instruction so it doesn't load until the document has fully rendered. It's similar to Tom's answer but in this case you will eliminate the majority of the DOM issues you're experiencing.