Cara Gampang Memakai Lazy Load Lazysize.Js Image Dan Embed Youtube

Ketika menciptakan template premium Kompi Males V6, aku menemukan cara gampang memakai LazySize.js untuk lazy load image dan embed video Youtube biar semua gambar dan embed video Youtube tidak membebani loading blog.

Dan cara gampang memakai lazy load lazySize.js ini aku juga menggabungkannya dengan trik otomatis menciptakan responsive embed video Youtube.

LazySize.js yaitu 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 dikala 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 dikala masuk ke area above the fold (gambar lebih cepat dimuat).

Untuk sanggup memakai lazysize.js, kita harus menambahkan class="lazyload" pada semua image dan iframe Youtube. Namun damai saja, kita tidak perlu mengedit image dan iframe Youtube satu per satu. Kita sanggup memakai javascript biar sanggup otomatis menambahkan class="lazyload" pada semua image dan iframe Youtube.

DEMO

Jika ingin mencobanya di blog Anda, silahkan simpan instruksi di bawah ini di atas instruksi </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 memakai jquery library berapa pun versi-nya.

Kode di atas juga akan otomatis menciptakan semua iframe Youtube menjadi responsive. Kaprikornus Anda pun tidak perlu repot-repot mengedit semua iframe Youtube biar menjadi responsive.

Updated

Kode javascript di atas kurang rapih dalam penulisannya (beberapa tag diulang-ulang), jadi aku update instruksi javascript di atas menjadi lebih rapih dalam penulisannya. Silahkan gunakan instruksi yang di bawah ini, bagi yang sudah memakai instruksi di atas silahkan ganti dengan instruksi 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>

Sumber https://www.kompiajaib.com/

Share this post