Ditulis oleh: Ditulis pada: 7/05/2019
Lazyload With Intersection Observer API Support HTTPS - Intersection Observer API ini secara sederhana adalah sebuah script yang dapat mendeteksi sebuah elemen berada atau sudah masuk viewport. Nah Intersection Observer API ini bisa digunakan untuk lazyload image dan iframe.
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.
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);
}
})Kode yang ditandai adalah kode yang merubah 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>Kode 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");Cek demo ini untuk lazyload Intersection Observer API ini secara otomatis tanpa mengeditnya atau menambahkan 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/