Menu
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?
403
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>
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.
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
