Lazyload Image, Javascript dan CSS


Selamat malam sobat codepelajar, pada minggu-minggu ini banyak chat yang masuk ke pesan daring Whatsapp dan facebook untuk dibuatkannya tutorial lazyload dengan efek silau-silau. Permintaan ini juga ada pada komentar pada postingan template H-Taku Responsive. Dan kali ini baru sempat buat tutorialnya.

Lazyload adalah istilah yang diberikan para pengembang untuk skrip/kode yang di eksekusi pada akhir sesudah halaman dimuat. Kata "Lazy" sendiri berarti malas, mendeskripsikan pekerjaan yang dikerjakan malas dan biasanya dikerjakan diakhir. Dalam pemograman terutama desain web, memasang kode Lazyload sangat banyak manfaatnya, justru lebih dianjurkan karena ini berguna sekali untuk kecepatan muat halaman. Sehingga situs web tidak terlalu berat saat memuat awalnya. Dengan Lazyload bisa menambah pengalaman pengguna (UX), mempercepat website dan skor hijau Gt-metrix atau pagespeed insight, dan menambah nilai plus untuk SEO on page.


Sebelum ke materi, ada point-point yang akan saya bahas untuk pembahasan Lazyload ini. Saya akan membagikan 3 jenis kode nya yaitu:

Itulah point yang akan saya bahas mengenai lazyload ini. Hanya itu saja sih tapi ini bisa bermanfaat menambah wawasan untuk kamu yang ingin belajar juga.

Lazyload CSS

Lazyload CSS ini biasanya digunakan untuk kode css yang dibuat dalam satu file yang dihost dan di tambahkan dengan tag <link> sebagai eksternal CSS. Untuk kode lazyloadnya menggunakan kode Javascript berikut ini:

<script>//<![CDATA[//
/*== LAZYLOAD CSS | CODEPELAJAR ==*/
function loadCSS(e, t, n) {
    "use strict";
    var i = window.document.createElement("link"); //membuat elemen dengan tag link
    var o = t || window.document.getElementsByTagName("script")[0];//elemen target untuk menyimpan kode
    i.rel = "stylesheet"; // atribut relasi ke stylesheet
    i.href = e; // url sebagai parameter
    i.media = "only x"; 
    o.parentNode.insertBefore(i, o); // method untuk menaruh script
    setTimeout(function () {
        i.media = n || "all"
    })
}
loadCSS("URL_CSS_1");
loadCSS("URL_CSS_2");
loadCSS("URL_CSS_3");
/* dan seterusnya */
//]]>//</script>

Lazyload CSS biasanya digunakan untuk CSS eksternal dengan ukuran file CSS tidak lebih 100Kb seperti Font Awesome dan Font dari Google Font. Karena jika kita memasang lazyload pada file CSS berukuran besar seperti Librari CSS Bootstrap, Zurb Foundation, dan lainnya biasanya akan menemui eror pada styling ataupun kode yang terintegrasi Javascript.


Lazyload Javascript

Lazyload yang kedua ini lazyload untuk kode javascript dan biasanya untuk file javascript eksternal. Penerapan kodenya seperti berikut ini:

<script>//<![CDATA[//
    function loadJavascript() {
        var e = document.createElement("script");
        e.src = "URL_JAVASCRIPT_ANDA", document.body.appendChild(e)
    }
    window.addEventListener ? window.addEventListener("load", loadJavascript, !1) : window.attachEvent ? window.attachEvent("onload", loadJavascript) : window.onload = loadJavascript;
//]]>//</script>

Kode lazyload JS yang diatas akan memuat javascipt eksternal tadi pada saat dokumen telah dimuat semuanya. Ada juga model seperti dibawah ini:

<script>//<![CDATA[//
var loadAfterSroll = false;
window.addEventListener("scroll", function () {
    if ((document.documentElement.scrollTop != 0 && loadAfterSroll === false) || (document.body.scrollTop != 0 && loadAfterSroll === false)) {
        (function () {
            var ad = document.createElement('script');
            ad.type = 'text/javascript';
            ad.async = true; // Matikan Asyncronous jika tidak memerlukan async
            ad.src = 'URL_JAVASCRIPT_ANDA';
            var sc = document.getElementsByTagName('script')[0];
            sc.parentNode.insertBefore(ad, sc);
        })();
        loadAfterSroll = true;
    }
}, true);
//]]>//</script>

Kode Lazyload JS yang seperti ini memiliki cara kerjanya dengan mengeksekusi skrip saat sobat melakukan scrolling pada halaman.


Lazyload Image

Gambar sering jadi masalah untuk pramuat halaman website, terutama bagian homepage. Untuk mengakalinya dengan menggunakan Lazyload. Saya sudah menyiapkan kode lazyload Image yang sedikit di modifikasi. skrip ini saya buat dengan memunculkan efek silau juga atau biasanya disebut dengan Skeleton (kalo gak salah). Jika belum cara buat efeknya bisa baca artikelnya disini. Berikut skrip lazyload untuk gambar:

<script>//<![CDATA[//
function LazyOnScroll() {
  setTimeout(function(){
    // lazyload || codepelajar.com
    function lazyLoad() {
      for (var e = document.getElementsByClassName("lazy"), t = 0; t < e.length; t++) isInViewport(e[t]) && (e[t].src = e[t].getAttribute("data-src"));removeSilau()
    }
    // remove efek silau setelah gambar ready
    function removeSilau() {
      var elems = document.querySelectorAll(".silau");
      [].forEach.call(elems, function (el) {
        el.classList.remove("silau");
      });
    }
    // viewport
    function isInViewport(e) {
      var t = e.getBoundingClientRect();
      return t.bottom >= 0 && t.right >= 0 && t.top <= (window.innerHeight || document.documentElement.clientHeight) && t.left <= (window.innerWidth || document.documentElement.clientWidth)
    }

    function registerListener(e, t) {
      window.addEventListener ? window.addEventListener(e, t) : window.attachEvent("on" + e, t)
    }
    registerListener("load", lazyLoad),
    registerListener("scroll", lazyLoad),
    document.addEventListener("DOMContentLoaded", function () {
      "use strict";
      for (var e = document.querySelectorAll("a"), t = e.length, n = /firefox|trident/i.test(navigator.userAgent) ? document.documentElement : document.body, i = function (e, t, n, i) {
        return (e /= i / 2) < 1 ? n / 2 * e * e * e + t : n / 2 * ((e -= 2) * e * e + 2) + t
      }; t--;) e.item(t).addEventListener("click", function (e) {
        var t, o = n.scrollTop,
          r = document.getElementById(/[^#]+$/.exec(this.href)[0]).getBoundingClientRect().top,
          d = n.scrollHeight - window.innerHeight,
          a = d > o + r ? r : d - o,
          c = 900,
          s = function (e) {
            t = t || e;
            var r = e - t,
              d = i(r, o, a, c);
            n.scrollTop = d, c > r && requestAnimationFrame(s)
          };
        requestAnimationFrame(s), e.preventDefault()
      })
    });
  },1000)
}
window.addEventListener ? window.addEventListener("load", LazyOnScroll, !1) : window.attachEvent ? window.attachEvent("onload", LazyOnScroll) : window.onload = LazyOnScroll;

//]]>//
</script>

Selanjutnya kode CSS yang harus ditambahkan seperti berikut ini:

<style type="text/css">/*<![CDATA[*/
.silau {
  padding-bottom: 60%;
  background: #eeeeee linear-gradient(to right, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, .75) 20%, rgba(255, 255, 255, 0) 30%);
  background-size: 100% 100%;
  animation: silau 3s linear infinite;
  -moz-animation: silau 3s linear infinite;
  -webkit-animation: silau 3s linear infinite;
  -o-animation: silau 3s linear infinite;
}
.silau img {
  opacity: 0;
  transition: 1s all;
}
@keyframes silau {
  0% {
    background-position: -400px 0
  }
  100% {
    background-position: 400px 0
  }
}
@-webkit-keyframes silau {
  0% {
    background-position: -50% 0
  }
  100% {
    background-position: 50% 0
  }
}
@-moz-keyframes silau {
  0% {
    background-position: -50% 0
  }
  100% {
    background-position: 50% 0
  }
}
/*]]>*/
</style>

Langkah selanjutnya adalah memberikan atribut class="lazy" dan mengubah atribut src menjadi data-src pada setiap gambar. Untuk mengaktifkan efek silau, harap masukan juga class="silau" pada thumb-wrapper atau elemen pembungkus untuk gambar thumbnail pada tema situs sobat. Lakukan seperti berikut ini:

 <div class='thumb-wrapper silau' >
      <img class='lazy' data-src='https://3.bp.blogspot.com/-DMsAtxW_se4/W95qBKjZzlI/AAAAAAAAAgY/rFMk5uOGNa4D7jBwg-u0NqLi7qPRI7XzgCLcBGAs/w255-h159-p-k-no-nu/cara-mengatur-rasio.png' />
    </div>

Untuk demonstrasi lazyload Image ini bisa dilihat di tautan codepen disini!.

Lazyload Image ini saya akui masih ada kekurangan terutama cara pengaplikasiannya masih manual memasukannya kedalam tag gambar. Namun ini sebagai latihan agar sobat memahami kode yang di tulis oleh sendiri walaupun hasil skrip tetap milik orang lain. Jika artikel ini membantu jangan sungkan untuk memberi feedbacknya di komentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel