Let’s say you have a Web page that displays “widgets” a small islands of information. And internally those widgets are IFRAME elements, whose source is loaded dynamically from the same server at runtime in client side JavaScript. So, you have a code similar to this:

var aIframes = document.getElementsByTagName('IFRAME');
for (var I = 0; I < aIframes.length; I++) {
    aIframes[I].src = aIframes[I].getAttribute('originalURL')
}

This (oversimplified) code assumes that URL for IFRAME source already stored as a custom attribute ‘originalURL’ of IFRAME element (for example placed there by server-side code), but it can equally come from other sources. This approach is usually taken so IFRAMES can initially display a static page with “Please wait. Loading…” animation meanwhile dynamically loading real data – creates a better user experience.

The code loops thru all IFRAMEs setting their SRC attribute, displaying content, so you would see something like

It’s all well and good, but there’s a small problem. SRC of IFRAMEs is assigned in order of their appearance on the page and if URLs are pointing to the same server and one of the earlier IFRAMEs takes a long time to load – it will block the rest of the IFRAMEs from loading. Continue reading →