Cara Membuat Progressive Image Loader - Ramai Beud

Membuat Progressive Image Loader di blogspot dan juga wordpress ada beberapa cara. Dan tentu saja usaha ini perlu kita lakukan sebagai seorang blogger, karena merupakan aspek penting untuk keberhasilan sebuah blog atau website.

Pernah membuka atau mengunjungi situs webnya Medium ? Bagaimana cara membuat gambar pada situs web atau blog kita bisa seperti yang terlihat pada situs medium tersebut.

Gambar yang ngeblur saat pertama kali kita buka situs tersebut namannya adalah Progressive Image Loader. Dan kali ini kita akan belajar bagaimana cara membuat Progressive Image Loader sama seperti yang terlihat pada situs web Medium.

Progressive image loader adalah cara yang tepat dan mudah untuk meningkatkan kecepatan situs web anda. Di buat dengan sedikit potongan kode css dan javascript. Kompatibel dengan browser modern dan pastinya sangat mudah untuk di terapkan pada blog anda.

Jika anda tadi pertama kali mengunjungi blog Ramai Beud pasti melihat gambarnya burem atau blur. Dan ketika beberapa saat kemudian baru muncul versi yang jelasnya. 

Kita bisa saja membuat hanya menggunakan css saja, namun untuk menunjang kecepatan loading situs web atau blog kurang bagus. Jadi untuk penerapannya, kita akan buat dengan tambahan javascript yang bisa berfungsi sekaligus sebagai lazy load image.

Baiklah, langsung saja kita mulai membuat Progressive Image Loader seperti situs Medium sebagaimana yang saya sebutkan di atas.

Membuat Progressive Image Loader dengan CSS dan Javascript

Optimasi Blog dalam hal kecepatan loading juga bisa meningkatkan SEO untuk blog kita. dan saat ini google sendiri juga telah sering berkampanye tentang optimasi kecepatan loading situs web agar bisa dengan mudah berada di halaman pertama google.

Ramai Beud adalah blog yang masih terbilang baru dan memang blog ini saya dedikasikan untuk bahan praktek tentang optimasi blog. Bukan hanya blogspot, saya juga sedang mendalami dalam hal optimasi kecepatan situs web atau blog berbasis wordpress.

Dan lumayan, untuk wordpress sedikit banyak sudah ada kemajuan yang terlihat.

Intinya, mau blogspot ataupun wordpress jika di pelajari lebih mendalam akan menjadi mudah untuk di pahami.

Kembali ke Progressive Image Loader, Bagaimana cara membuat dan menerapkannya pada blogspot.

Baiklah, mari kita mulai membuat file cssnya terlebih dahulu :

/* progressive image CSS */
.progressive {
  position: relative;
  display: block;
  overflow: hidden;
  outline: none;
}

.progressive img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  border: 0 none;
}

.progressive img.preview {
  filter: blur(2vw);
  transform: scale(1.05);
}

.progressive img.reveal {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform, opacity;
  animation: progressiveReveal 1s ease-out;
}

@keyframes progressiveReveal {
 0% { transform: scale(1.05); opacity: 0; }
 100% { transform: scale(1); opacity: 1; }
}

Kemudian kita buat file Javascriptnya :

// progressive-image.js
if (window.addEventListener && window.requestAnimationFrame && document.getElementsByClassName) window.addEventListener('load', function() {

  // Mulai
  var pItem = document.getElementsByClassName('progressive replace'), 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('replace');
      }
      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 = 'reveal';
    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.preview');
        if (pImg) {
          e.target.alt = pImg.alt || '';
          item.removeChild(pImg);
          e.target.classList.remove('reveal');
        }

      });

    }

  }

}, false);

Dan yang terakhir kita terapkan dalam tag img untuk template blogspot anda.

<a href="https://ucarecdn.com/718f79c5-2868-41c8-b56e-c87237674adb/-/resize/500x/man.jpg" class="full progressive replace">
      <img src="https://ucarecdn.com/718f79c5-2868-41c8-b56e-c87237674adb/-/resize/32x/man.jpg" class="preview" alt="man" />
    </a>

Jika sudah selesai semua, silahkan anda simpan dan coba lakukan refresh pada halaman homepage blogspot anda. Jika berhasil, berarti anda telah benar melakukannya, dan jika tidak ada tanda tanda berhasil, coba cek lagi penerapan kodenya.

Sampai disini sudah bisa di pahami ? Jika masih ada yang belum di pahami bisa menanyakannya melalui kolom komentar di bawah ini.

Demikianlah, semoga berkenan dan bermanfaat, dan Apabila artikel Cara Membuat Progressive Image Loader seperti situs Medium ini menurut anda berguna, silahkan bagikan kepada pengikut anda di sosial media. Sampai ketemu lagi di lain kesempatan.