Question

One thing that bugs me about IE is that when it goes to load a page with an iframe it will wait until the iframe has finished loading before it will render the page. Firefox by contrast will render all the other page elements while the iframe is loading which is really nice if the iframe takes a long time to load because it gives the user some feedback that the page is progressing. It also allows you to do things like display a ‘iframe loading’ messege while the frame loads and swap it out onload of the iframe.

So, I am wondering if anyone has found a workaround for this. Ideally, I’d like to see a cross browser solution that shows a progess bar as an iframe loads on the page. Short of that I’d take a method of implementing an iframe that forces IE to first render the page then load the iframe.

I have seen a couple of interesting jquery progress bars like: http://plugins.jquery.com/project/jQueryProgressBar

But…(and correct me if I’m wrong here cause my understanding is shaky)…it seems to me the jquery bars only render after the DOM has loaded. In IE the iframe content is not shown until after the DOM is loaded so showing a progress bar at that point is irrelevant.

I’ve also tried setting the iframe src to loading.htm and then onload switch the src to the content I want. Sadly IE still will not render the page until the final content page comes up (seems strange to me).

Help me stackoverflow, you’re my only hope.

Answer 1

What if you were to load the page with an XmlHttpRequest and then replace the contents of the document as/when it loads?

<!-- jQuery example: -->  <div id='content'>Loading...</div>  <script type='text/javascript'> $('#content').load(url); </script>