Lazy Load Image And Embed Responsive Youtube Video With Javascript LazySize.js

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

Maka kini kita akan membuat 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 menggunakan jquey library bisa menggunakan lazy load dengan lazysize.js karena lazysize.js sendiri tidak memerlukan jquery library.


Yang ingin mencobanya silahkan copy kode di bawah ini dan simpan 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].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>


Reactions:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser