LazyLoad IMG & BG ala Tetangga-sebelah.com

by. Tetangga-sebelah.com

by Rian .N Herdian

HTML

<img class="fastIMG" data-src="https://images.unsplash.com/photo-1509653183608-c9bd54cc583b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=83061a131cc145d2c25d5f16d626f0e6&auto=format&fit=crop&w=3000&h=3000" />

<div class="fastBG" data-src="https://images.unsplash.com/photo-1522205419828-f5b336fc3931?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7b10bf52b7ea50de3250fe021944e57d&auto=format&fit=crop&w=1500&h=1500">
</div>

CSS

* {
  margin: 0; /* CSS FOR DEMO */
  padding: 0; /* CSS FOR DEMO */
  box-sizing: border-box; /* CSS FOR DEMO */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; /* CSS FOR DEMO */
}
img {
  display:inline-block; /* CSS FOR DEMO */
  max-width:300px; /* CSS FOR DEMO */
}
div {
  display:inline-block; /* CSS FOR DEMO */
  width:300px; /* CSS FOR DEMO */
  height:300px; /* CSS FOR DEMO */
}

/* LazyLoad-IMG-BG By. Tetangga-sebelah.com ( WhatsApp. +62 896-1888-5066 / [email protected] ) */
div.fastBG img.HideBG {
  position:fixed;top:-9999px;
}
div.fastBG {
  background-image: url(https://lh3.googleusercontent.com/-jtrU8cyX6uY/WuKYThGhyNI/AAAAAAAAEr0/nkfdnr1csvMJ866X6uzADxn4bAR8AO_qQCLcBGAs/h40/loader.gif);
  background-color: #eee;
  background-position: center center;
  background-repeat: no-repeat;
}
div.fastLoad {
  background-image: url(https://lh3.googleusercontent.com/-jtrU8cyX6uY/WuKYThGhyNI/AAAAAAAAEr0/nkfdnr1csvMJ866X6uzADxn4bAR8AO_qQCLcBGAs/h40/loader.gif);
  background-color: #eee;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  padding-top: 100%;
}
img.fastIMG {
  opacity: 0;
}
/* LazyLoad-IMG-BG By. Tetangga-sebelah.com ( WhatsApp. +62 896-1888-5066 / [email protected] ) */

JavaScript

/* LazyLoad-IMG-BG By. Tetangga-sebelah.com ( WhatsApp. +62 896-1888-5066 / [email protected] ) */
$(window).bind("load", function() {
  $("img.fastIMG").each(function() {
    var dataIMG = $(this).attr('data-src');
    $(this).wrap('<div class="fastLoad"></div>');
    $(this).attr('style','position:fixed;top:-9999px;');
    $(this).attr('src', dataIMG);
    $(this).one('load', function() {
      // alert('Gambar berhasil dimuat!');
      $(this).unwrap();
      $(this).animate({ opacity: 1 }, 2000);
      $(this).removeAttr('data-src');
      $(this).removeAttr('style');
    });
  });
  $('.fastBG').each(function() {
    var dataBG = $(this).attr('data-src');
    $(this).append('<img src="' + dataBG + '" class="HideBG"/>')
    $(this).find('img').one('load', function() {
      // alert("Latar Belakang berhasil dimuat!");
      $(this).parent().attr('style', 'background-image:url(' + dataBG + ');opacity:0;');
      $(this).parent().animate({ opacity: 1 }, 2000);
      $(this).parent().css('background-size', 'cover');
      $(this).parent().removeAttr('data-src');
      $(this).remove();
    });
  });
});
/* LazyLoad-IMG-BG By. Tetangga-sebelah.com ( WhatsApp. +62 896-1888-5066 / [email protected] ) */