How to make a Progressive image loader in Blog

Blogboosters.net - Ever opened or visited the website Medium? How do you make an image on your website or blog as you can on the medium site? The image that blurred when we first opened the site, the name is Progressive Image Loader. And this time we will learn how to make the Progressive Image Loader the same as seen on the Medium website.

Progressive Image Loader

Progressive image loader is the right and easy way to increase the speed of your website. Made with a few pieces of CSS and javascript code. Compatible with modern browsers and certainly very easy to apply to your blog.


If you visited the blog for the first time, you will definitely see the image is blurry or blurry. And when a few moments later a clear version appears. We can just make it using just CSS, but to support the loading speed of a website or blog is not good. So for implementation, we will create additional javascript that can function at once as lazy load image.

Well, we just started to make Progressive Image Loaders like the Medium site as I mentioned above.

Make Progressive Image Loader with CSS and Javascript

Blog optimization in terms of loading speed can also improve SEO for our blog. and now Google itself has also often campaigned about optimizing website loading speed so that it can easily be on the first page of Google.


Blogboosters is a blog that is still relatively new and indeed this blog I dedicate to practice material about blog optimization. Not only blogspot, I am also deepening in terms of speed optimization on WordPress-based websites or blogs. And quite well, for WordPress, there is more progress in sight.


In essence, if you want to blogspot or WordPress if you learn more deeply it will be easy to understand. Why, how come I digress, :).

Back to Progressive Image Loader, How do I create and apply it to blogspot?

Okay, let's start creating Progressive Image Loader CSS file first:

/* 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; }
}


Then we created the creating Progressive Image Loader with Javascript file:


// 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);

And lastly, we apply in img tags for your blogspot template.


If you have finished everything, please save it and try to refresh it on your blogspot homepage. If successful, it means you have done it right, and if there are no signs of success, try checking the code again.

Until here can you understand? If there are still those who have not been understood, you can ask them through the comments column below.

Thus, hopefully, it is pleasing and useful, and if you find the article How to Make Progressive Image Loader like this Medium site useful, please share it with your followers on social media. See you next time.

Read Also: How to Make a Navigation Menu on Footer Contempo, Soho, and Emporio Themes

Comments

Popular posts from this blog

7 Functions of VPS You Need to Know

Google Algorithm 2018 and Change Your SEO Strategy

5 Best Battle Royale Games (PUBG) on Smartphones

Increase Blog Traffic By Setting Permalink

How to Create SEO Friendly Blog Post Title

HTML Color Code and How to Use it

The Ideal Way to Get Ideas for Writing

Creating Sub Domains from Custom Domain Blogspot

Comparison of WordPress Advantages With Other Platforms

How to Create Free Website with Weebly