Cara Membuat iFrame Dimuat Belakangan (Preload iFrame)
Iframe atau embed script terkadang membuat sebuah situs web jadi lebih lama untuk terbuka dengan sempurna.
- 11:08 WIB
 |
Iframe atau embed script terkadang membuat sebuah situs web jadi lebih lama untuk terbuka dengan sempurna. Hal ini dikarenakan, anda sekaligus akan mengakses dua situs web atau lebih tergantung berapa buah iframe yang terdapat di halaman tersebut.
Untuk mengatasinya, Anda bisa menggunakan preload pada iFrame. Berikut beberapa caranya:
Menggunakan rel="preload"
Anda bisa menyisipkan rel="preload" di antara <head> dan </head> pada tautan anda seperti ini:
<link rel="preload" href="https://example.com/widget.html" as="document">{codeBox}
Dan anda bisa menggunakan iframe seperti biasanya:
<iframe src="https://example.com/widget.html"></iframe>{codeBox}
Menyisipkan JavaScript
Cara kedua adalah dengan menggunakan JavaScript, di mana Anda kode Anda akan dimuat ketika halaman iframe ditampilkan.
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://example.com/widget.html");
Semoga bermanfaat.
Foto: Ilustrasi preload pada situs web. (Sumber: Twitter/addyosmani)