Lazy Load Image And Embed Responsive Youtube Video With Javascript Lazysize.Js

Setelah kemarin kita menciptakan lazy load untuk image dan video Youtube dengan lazysize.js dan memakai jquery untuk otomatis menambahkan class="lazyload" dan merubah scr attribute menjadi data-src attribute pada image dan iframe Youtube.

Maka sekarang kita akan menciptakan pure javascript untuk otomatis menambahkan class="lazyload" dan merubah src attribute menjadi data-src attribute pada image dan iframe Youtube serta otomatis merubah iframe video Youtube menjadi responsive.

Dengan pure javascript maka tidak memerlukan jquery library sehingga blog yang tidak memakai jquey library dapat memakai lazy load dengan lazysize.js sebab lazysize.js sendiri tidak memerlukan jquery library.

DEMO

Yang ingin mencobanya silahkan copy isyarat di bawah ini dan simpan di atas isyarat </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].className+=" lazyload",imgEl[i].setAttribute("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="));
 
 function wrap(top, selector, bottom) {
 var videos = document.querySelectorAll(selector);
     for (var i = 0; i < videos.length; i++) {
         if (videos[i].getAttribute('src')) {
             videos[i].setAttribute('data-src', videos[i].getAttribute('src'));
             videos[i].removeAttribute('src');
         }
         videos[i].setAttribute("class","lazyload");
         videos[i].setAttribute("style", "position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 0px;");
         var modified = top + videos[i].outerHTML + bottom;
         videos[i].outerHTML = modified;
     }
 }
 wrap("<div style='position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0 auto;width:100%'>", "iframe[src*='youtube.com']", "</div>");
 //]]>
 </script>

Sumber https://www.kompiajaib.com/

Share this post