JSFiddle - React, Tailwind, and code Playground

by pikitemplates

HTML

<img alt="Technology is a useful servant but a dangerous master." class="snip-thumbnail" data-src="https://blogger.googleusercontent.com/img/a/AVvXsEgnrDMaAp2Q9uisoGEtOiaMioMHpSNzt3dojLHxvs2GPXQC_Ll_amkzyOSEJoipVog6_ociLCRWGP-NalPV21osbe5Z46_yAglnimy6Ukk6biDyP8of7yqbRoP4isPmm6UEiYZuEWn3QoAdDjcM7xgsQMiaQi8J12EvEFIDkTG3OClET7qfltr9JvfT=w74-h" >
<br/>
<img alt="Technology is a useful servant but a dangerous master." class="snip-thumbnail lazy-img" data-src="https://blogger.googleusercontent.com/img/a/AVvXsEgnrDMaAp2Q9uisoGEtOiaMioMHpSNzt3dojLHxvs2GPXQC_Ll_amkzyOSEJoipVog6_ociLCRWGP-NalPV21osbe5Z46_yAglnimy6Ukk6biDyP8of7yqbRoP4isPmm6UEiYZuEWn3QoAdDjcM7xgsQMiaQi8J12EvEFIDkTG3OClET7qfltr9JvfT=s74-c" >
<br/>
// if images have w500-h500  means high quality
<img alt="Technology is a useful servant but a dangerous master." class="snip-thumbnail" data-src="https://1.bp.blogspot.com/-ku3VpJbHcwg/YJC1O3tlnxI/AAAAAAAABfE/ndUb_aw0k28MWpcF4fmg0pX9XxePAgANQCLcBGAsYHQ/w74-h74-p-k-no-nu/Galaxy-Blogger-Templates-%25281%2529-%25281%2529.jpg" >
<br/>
// images have quality option like w74-h74 means low qualtiy
<img alt="Technology is a useful servant but a dangerous master." class="snip-thumbnail" data-src="https://blogger.googleusercontent.com/img/a/AVvXsEgnrDMaAp2Q9uisoGEtOiaMioMHpSNzt3dojLHxvs2GPXQC_Ll_amkzyOSEJoipVog6_ociLCRWGP-NalPV21osbe5Z46_yAglnimy6Ukk6biDyP8of7yqbRoP4isPmm6UEiYZuEWn3QoAdDjcM7xgsQMiaQi8J12EvEFIDkTG3OClET7qfltr9JvfT=w74-h74-p-k-no-nu" >

CSS

.snip-thumbnail{position:relative;width:200px;height:300px;display:block;object-fit:cover;z-index:1;opacity:0;transition:opacity .30s ease,transform .30s ease}
.snip-thumbnail.lazy-img{opacity:1}

JavaScript

!function($) {
  /**
   * @return {?}
   */
  $.fn.lazyimg = function() {
    return this.each(function() {
      var $t = $(this);
      var $W = $(window);
      var url = $t.attr("data-src");
      /** @type {string} */
      var value = "w" + Math.round($t.width() + $t.width() / 10) + "-h" + Math.round($t.height() + $t.height() / 10) + "-p-k-no-nu";
      if (url.match("googleusercontent.com") && url.match("=")) {
        z = url.split("=");
        url = z[1] && "" != z[1].trim() ? z[0] + "=w74-h74-p-k-no-nu" : url;
      }
      if (url.match("googleusercontent.com") && !url.match("=")) {
        /** @type {string} */
        url = url + "=w74-h74-p-k-no-nu";
      }
      var normalSrc = url.match("/s74-c") ? url.replace("/s74-c", "/" + value) : url.match("/w74-h") ? url.replace("/w74-h74-p-k-no-nu", "/" + value) : url.match("=w74-h") ? url.replace("=w74-h74-p-k-no-nu", "=" + value) : url;
      if (!$t.is(":hidden")) {
        $W.on("load resize scroll", function thumbchange() {
          if ($W.scrollTop() + $W.height() >= $t.offset().top) {
            $W.off("load resize scroll", thumbchange);
            /** @type {!Image} */
            var img = new Image;
            /**
             * @return {undefined}
             */
            img.onload = function() {
              $t.attr("src", "" + this.src).addClass("lazy-img");
            };
            img.src = normalSrc;
          }
        }).trigger("scroll");
      }
    });
  };
}(jQuery);


 $("img.snip-thumbnail").lazyimg();