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() {
      /**
       * @return {undefined}
       */
      function o() {
        var threshold = $(window).height();
        if ($(window).scrollTop() + threshold > t.offset().top) {
          /** @type {!Image} */
          var a = new Image;
          /**
           * @return {undefined}
           */
          a.onload = function() {
            t.addClass("lazy-img");
          };
          a.src = s;
        }
      }
      var t = $(this);
      var a = t.attr("data-src");
      /** @type {number} */
      var i = Math.round(t.height());
      /** @type {string} */
      var s = "";
      s = a.match("s72-c") ? a.replace("/s72-c", i) : a;
      $(window).on("load scroll", o);
      o();
    });
  };
});
 $("img.snip-thumbnail").lazyimg();