Intersection Observer API merupakan rangkaian javascript pendek untuk mendeteksi sebuah elemen berada atau sudah masuk viewport dan terbilang masih baru, sehingga ini belum didukung oleh semua browser. Namun saya yakin sebentar lagi semua browser akan mendukung Intersection Observer API.
Untuk itu, Anda bisa menggunakan lazysizes.js atau javascript untuk defer atau menunda pemuatan atau lazyload image atau iframe sebelum semua browser mendukung Intersection Observer API.
Seperti lazyload yang lain, Intersection Observer API akan mengubah
data-src pada image atau iframe menjadi src ketika elemen berada atau sudah masuk viewport.Setelah saya searching cara yang direkomendasikan untuk lazyload image, akhirnya saya menemukan Intersection Observer API ini. Namun script Intersection Observer API ini belum support HTTPS.
Untuk itu saya menambahkan sedikit kode agar Intersection Observer API ini juga dapat secara otomatis merubah
http:// atau https:// pada URL image atau iframe menjadi // sehingga tidak menyebabkan mixed content.
Klik gambar untuk memperbesar. Klik Esc di keyboard untuk kembali.
Coba Anda cek demo ini, image dan iframe masih menggunakan http:// dan menggunakan Intersection Observer API yang belum support HTTPS. Image masih tampil dan iframe di bawah image tidak tampil, dan HTTPS pada address bar menjadi tanda seru yang menandakan halaman tersebut terjadi mixed content.Lalu coba cek pada demo ini, image dan iframe masih menggunakan
http:// seperti pada demo sebelumnya, namun menggunakan Intersection Observer API yang sudah support HTTPS. Image dan iframe di bawah image bisa tampil tanpa menyebabkan mixed content.Jika Anda ingin mencoba menggunakan Intersection Observer API yang support HTTPS, silahkan gunakan script di bawah ini.
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages;
if ("IntersectionObserver" in window) {
lazyloadImages = document.querySelectorAll(".lazy");
var imageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var image = entry.target;
image.src = image.dataset.src;
image.src = image.src.replace(/.*?:\/\//g,"//");
image.classList.remove("lazy");
imageObserver.unobserve(image);
}
});
});
lazyloadImages.forEach(function(image) {
imageObserver.observe(image);
});
} else {
var lazyloadThrottleTimeout;
lazyloadImages = document.querySelectorAll(".lazy");
function lazyload () {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.src = img.src.replace(/.*?:\/\//g,"//");
img.classList.remove('lazy');
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 20);
}
document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
}
})http:// atau https:// pada URL image atau iframe menjadi //Dan pada image atau iframe dibuat seperti berikut untuk lazyload ini.
src dirubah jadi data-src dan ditambah class="lazy"
<img alt='Image' class='lazy' data-src='URL IMAGE' height='9' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJAQMAAAAB5D5xAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjwA0AABsAAQrj5HwAAAAASUVORK5CYII=' title='Image' width='16'/>
<iframe data-src="URL VIDEO YOUTUBE" class="lazy" frameborder="0" allowfullscreen></iframe>src yang ditandai pada image adalah image transparent sebagai fallback sebelum gambar aslinya dimuat.Jika ingin semua gambar support lazyload Intersection Observer API ini secara otomatis tanpa mengeditnya secara manual, silahkan gunakan script berikut untuk menambahkan
class='lazy' pada image:
for(var imgEl=document.getElementsByTagName("img"),i=0;i<imgEl.length;i++)imgEl[i].getAttribute("src")&&(imgEl[i].setAttribute("data-src",imgEl[i].getAttribute("src")),imgEl[i].removeAttribute("src"),imgEl[i].className+=" lazy");class='lazy' pada image secara manual.Semoga bermanfaat.
Referensi:
https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/
https://imagekit.io/blog/lazy-loading-images-complete-guide/