Javascript preload iframe without blocking the browser

Question

I have several iframes to load with a huge 3D model behind.

When i display my iframe on my website, my browser block while this iframe is loading (maybe 20seconds..)

I'm looking for a way to preload these iframe without blocking the browser. I tried something with display none, ajax or by create iframe dynamically but no effect.

Do you have any ideas ? Thanks !

Answer 1

AFAIK, there is no clean supported/standard way of pre-loading iFrame without blocking the browser.

There are however ways you can minimize this "block". To give you some perspective, here's where the browser blocks:

• loading scripts
• loading big external resources (scripts/images/css/other media)
• heavy DOM manipulation
• intensive computation

To mitigate script loading, you can use techniques such as Loading Scripts Without Blocking. If you can get browser caching right, then the page in iFrame will spend no time downloading the script since its already in the cache.

For other resources, if applicable, you can use the same pre-loading techniques to fill up browser cache.

Heavy DOM manipulation - you can use techniques outlined here and here which will help you minimize repaints and reflows.

If possible, you can maybe adapt what ReactJs does, to minimize browser DOM manipulation by using a virtual DOM

You mentioned 3D model computation and they tend to be computationally intensive. You should look at using Web Workers which would offload the blocking aspect from the main browser thread into a background thread.

All of these techniques combined will minimize the block. You do not have to necessarily implement all of the techniques, if you can isolate and identify the part that's the biggest bottleneck.

Hope this helps!

Answer 2

You should be able to load your <iframe> URLs in an AJAX GET request, then append them to the document once they are loaded.

I'd write something like the following:

var iframes = [{ location: "div1"; url: "url1.html" },{ location: "div2"; url: "url2.html" }];

iframes.forEach(function(current) {
  $.get(current.url).done(function() {
    $('#' + current.location).append('<iframe src="' + current.url + '"/>');
  });
});