Membuat Lazy Load Medium

Seperti yang kita ketahui bahwa lazy load yang digunakan oleh situs Medium.com tersebut menggunakan Progressive lazy load atau lazy load blur. Saya sendiri sangat tertarik dengan Progressive tersebut dan sudah saya terapkan pada template yang akan saya buat, bagi kalian yang ingin mencoba Progressive lazy load bisa langsung ke tutorial.

Progressive lazy load masih sama seperti kita menggunakan lazy load biasa akan tetapi kita tidak akan menggunakan data-src melainkan menggunakan css dan javascript.

Membuat Lazy Load Medium

Pertama buka Blogger > Klik Tema > Klik Edit HTML

Kedua cari kode </body> lalu tambahkan kode dibawah ini diatasnya

<script type="text/javascript">
 // progressive-image.js
if (window.addEventListener && window.requestAnimationFrame && document.getElementsByClassName) window.addEventListener('load', function() {

  // Mulai
  var pItem = document.getElementsByClassName('blur keren'), timer;

  window.addEventListener('scroll', scroller, false);
  window.addEventListener('resize', scroller, false);
  inView();


  // Mengubah Ukuran ketika di Scrool
  function scroller(e) {

    timer = timer || setTimeout(function() {
      timer = null;
      requestAnimationFrame(inView);
    }, 300);

  }


  // Memuat Gambar kecil
  function inView() {

    var wT = window.pageYOffset, wB = wT + window.innerHeight, cRect, pT, pB, p = 0;
    while (p < pItem.length) {

      cRect = pItem[p].getBoundingClientRect();
      pT = wT + cRect.top;
      pB = pT + cRect.height;

      if (wT < pB && wB > pT) {
        loadFullImage(pItem[p]);
        pItem[p].classList.remove('keren');
      }
      else p++;

    }

  }


  // Merubah ukuran Gambar menjadi besar kembali
  function loadFullImage(item) {

    if (!item || !item.href) return;

    // Proses Load Gambar
    var img = new Image();
    if (item.dataset) {
      img.srcset = item.dataset.srcset || '';
      img.sizes = item.dataset.sizes || '';
    }
    img.src = item.href;
    img.className = 'soun';
    if (img.complete) addImg();
    else img.onload = addImg;

    // Replace Gambar
    function addImg() {

      // Mematikan Klik pada url Gambar
      item.addEventListener('click', function(e) { e.preventDefault(); }, false);

      // Menambah ukuran penuh Gambar
      item.appendChild(img).addEventListener('animationend', function(e) {

        // Menghapus ukuran gambar kecil
        var pImg = item.querySelector && item.querySelector('img.pasti');
        if (pImg) {
          e.target.alt = pImg.alt || '';
          item.removeChild(pImg);
          e.target.classList.remove('soun');
        }

      });

    }

  }

}, false);
</script>

Ketiga cari kode <style> lalu tambahkan kode seperti dibawah ini

.blur{position:relative;display:block;overflow:hidden;outline:none;}.blur img{display:block;width:100%;max-width:none;height:auto;border:0 none;}.blur img.pasti{filter:blur(2vw);transform:scale(1.05);}.blur img.soun{position:absolute;left:0;top:0;will-change:transform,opacity;animation:blursoun 3s ease-out;}@keyframes blursoun{0%{transform:scale(1.05);opacity:0;}100%{transform:scale(1);opacity:1;}}

Ke empat cari kode <img lalu tambahkan kode seperti dibawah ini

<a expr:href="data:post.url" class="blur keren">
<img expr:src="data:post.thumbnailUrl" class="pasti"/></a>

Setelah selesai klik Simpan Tema

Kode yang ditandai diatas harus kalian terapkan di kode <img> karena itu yang pentingnya.

Untuk melihat demonya bisa kalian klik tombol dibawah ini

• Result

Bagikan Artikel ini