How to preload iframes

javascript iframe preload

22,934

Solution 1

I've answered a similar question there:

https://stackoverflow.com/a/46121439/1951947

In your case it would be:

<link rel="preload" href="https://example.com/widget.html" as="document">

and then you can use your iframe as usual:

<iframe src="https://example.com/widget.html"></iframe>

Solution 2

you cannot get rid of the browser loading indication.
why don't you just create iframe elements using DOM operations like the following..

you need a.. "kind of" invisible container for preloading iframes. you need to put iframes into the documents body or else they would not start loading.

var container = document.createElement("div");
// this will prevent scrollbars in the container
container.style.overflow = "hidden";
// this ensures the container is always in the visible area
// sometimes browser don't load what's out of the viewscope so this would help against that
container.style.position = "fixed";
// this will turn the container "click through"
container.style.pointerEvents = "none";
// this will render the div invisible:
container.style.opacity = 0;
// this will try to put the container behind the <body> element:
container.style.zIndex = -1;
// this will remove any performance loss when scrolling:
container.style.willChange = "transform";
document.body.appendChild(container);
var framePreload = function (url) {
    var frame = document.createElement("iframe");
    frame.src = url;
    container.appendChild(frame);
    return frame;
};
var frame = framePreload("https://www.youtube.com/embed/aqz-KE-bpKQ?autoplay=1");

from there you have plenty of options. i'd recommend using replaceChild on the parent element of the original frames so you can just swap them with the preloaded ones.
something like this: originalFrame.parentNode.replaceChild(frame, originalFrame);
you also need to re set the classnames etc.
well instead of doing document.createElement("iframe") you could also use cloneNode to copy all of the frames attributes to the new frames.

22,934

Author by

NBI

Updated on September 28, 2020

Comments

NBI over 2 years

I am having multiple iframes to display data in a page.
I want to preload the next 3 iframes while viewing current view. am doing like the below:

I will hide the all iframes and set the source for it.
When I clicked on a particular view I will show it and in background I will load the next 3 iframes.
while doing this, some loading is showing in browser tab and it doesn't look good at all.

How to get rid of this loading in browser for usability?
Cybernetic over 5 years

This works like a charm. Chrome throws a warning about the "as" value but it still seems to work.
januszm about 5 years

Does not seem to work, and it seems that this is related to: bugs.chromium.org/p/chromium/issues/detail?id=593267
Herat Patel over 3 years

It gives me the error and status converted to canceled.
fny over 2 years

This definitely does not work. I've attempted on several browsers. The loading time does not change.