Ditulis oleh: Ditulis pada: 2/04/2017
Ketika membuat template premium Kompi Males V6, saya menemukan cara mudah menggunakan LazySize.js untuk lazy load image dan embed video Youtube agar semua gambar dan embed video Youtube tidak membebani loading blog.Dan cara mudah menggunakan lazy load lazySize.js ini saya juga menggabungkannya dengan trik otomatis membuat responsive embed video Youtube.
LazySize.js adalah sebuah plugin untuk lazy load image dan iframe. Image dan iframe tidak akan di-load browser sebelum halaman di-scroll. Berbeda dengan lazyload.js yang memuat image ketika image berada di above the fold (area tampak layar), lazysize.js memuat gambar atau iframe sebelum masuk di above the fold sehingga gambar sudah tampak ketika masuk ke area above the fold (gambar lebih cepat dimuat).
Untuk dapat menggunakan lazysize.js, kita harus menambahkan
class="lazyload" pada semua image dan iframe Youtube. Namun tenang saja, kita tidak perlu mengedit image dan iframe Youtube satu per satu. Kita bisa menggunakan javascript agar dapat otomatis menambahkan class="lazyload" pada semua image dan iframe Youtube.Jika ingin mencobanya di blog Anda, silahkan simpan kode di bawah ini di atas kode
</body>
<script async='async' src='https://cdn.rawgit.com/aFarkas/lazysizes/gh-pages/lazysizes.min.js' type='text/javascript'></script>
<script>
//<![CDATA[
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].setAttribute("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="));console.log(document.body.innerHTML);
var images=document.getElementsByTagName("img"),i;for(i=0;i<images.length;i++)images[i].className+=" lazyload";
$("iframe[src*='youtube.com']").addClass("lazyload");
$(document).ready(function() {
$('iframe[src*="youtube.com"]').wrap('<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0 auto;width:100%"></div>');
$('iframe[src*="youtube.com"]').css({
"position": "absolute",
"top": "0",
"left": "0",
"width": "100%",
"height": "100%",
"border": "0"
});
$('iframe[src*="youtube.com"]').each(function() {
$(this).attr("data-src", $(this).attr("src"));
$(this).removeAttr("src", "")
});
});
//]]>
</script>
Dan pastikan blog Anda sudah menggunakan jquery library berapa pun versi-nya.
Kode di atas juga akan otomatis membuat semua iframe Youtube menjadi responsive. Jadi Anda pun tidak perlu repot-repot mengedit semua iframe Youtube agar menjadi responsive.
Updated
Kode javascript di atas kurang rapih dalam penulisannya (beberapa tag diulang-ulang), jadi saya update kode javascript di atas menjadi lebih rapih dalam penulisannya. Silahkan gunakan kode yang di bawah ini, bagi yang sudah menggunakan kode di atas silahkan ganti dengan kode di bawah ini.
<script async='async' src='https://cdn.rawgit.com/aFarkas/lazysizes/gh-pages/lazysizes.min.js' type='text/javascript'></script>
<script>
//<![CDATA[
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].className+=" lazyload",imgEl[i].setAttribute("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="));
$(document).ready(function() {
$('iframe[src*="youtube.com"]').wrap('<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0 auto;width:100%"></div>').css({
"position": "absolute",
"top": "0",
"left": "0",
"width": "100%",
"height": "100%",
"border": "0"
}).addClass("lazyload").each(function() {
$(this).attr("data-src", $(this).attr("src"));
$(this).removeAttr("src", "")
});
});
//]]>
</script>