Onload of main page fires without interference of the iframe: the iframe does not block the main page onload !.Iframe starts loading after onload of main page.The Iframe After Onload technique will consistently show the following behaviour in all browsers: addEventListener ( "load", createIframe, false ) Check for browser support of event handling capability getElementById ( "div-that-holds-the-iframe" ). Or the content of the iframe is not immediately visible to the user because it's way down below the fold or hidden behind a link/tab.Ĭonsider deferring the loading of the iframe until after the main page is done. Imagine you want to load something in an iframe, but it's not really important for the page. Test it on your page(s) and run it through a few times, look at the impact on onload (Doc Complete time) and decide if you need a better technique. It's not a big problem if the iframe content takes a short time to load (and execute), and the iframe in itself is good to use because it loads in parallel with the main page.īut if it takes long for the iframe to finish, the user experience is damaged. My advice: be aware of the onload blocking. The waterfall chart below clearly shows how the Normal Iframe blocks the main page onload. I created a simple test page and ran it through (IE7 and IE8). While the iframe is loading, one or more browser busy indicators show something is loading.Onload of main page fires after the iframe's onload fires: the iframe blocks the main page onload !.Onload of the iframe fires after all iframe content is done loading.Iframe starts loading before onload of main page.Using the Normal Iframe technique will result in the following behaviour in all browsers: It's the default way to load an iframe and works in all browsers: It doesn't really qualify as an iframe loading technique, but it has to do with iframes, ads and (non)-blocking. Oh, and as a bonus, I throw in the Friendly Iframe technique. I recommend to look closely at the Dynamic Asynch Iframe technique because this one is great for performance. For each the behaviour related to the load event is described and shown by way of IE8 waterfall charts. This article shows 4 ways to load an iframe in a web page: Normal Iframe, Iframe After Onload, Iframe setTimeout() Dynamic Asynch Iframe. How can you load an iframe without blocking onload and as a result improve page performance? You really want the load event to fire as soon as possible, for optimal user experience of course but also because of how Google measures your site speed: Google Toolbar in IE and FF browsers of site visitors measures time to onload. The onload blocking is the biggest problem of the two and hurts performance the most. The main page and iframe share the same connection pool.Loading content in an iframe does however have two downsides, as Steve Souders outlines in his blog post Using Iframes Sparignly The main reason to use the iframe technique is that the iframe content can load in parallel with the main page: it doesn't block the main page. Iframes are often used to load third party content, ads and widgets. It's probably something small with the JavaScript code. The file that gets loaded into the iframe simply does not load. Iframe setTimeout() does not work in IE9.Ĭhad Barnsdale of mentioned to me on May 25 that the Iframe setTimeout() technique does not work in IE9.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |