Cara Mudah Menggunakan Lazy Load

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 tepat di atas </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="));
$(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>

Demikianlah Cara Mudah Menggunakan Lazy Load untuk mempercepat loading sebuah blog atu website anda.

Berbagi :