Lazy load images blogger

Lazy load images blogger
Lazy load images blogger

    lazy loading blogger berguna untuk :
  1. Mempercepat laman web
  2. Meningkatkan rating pagespeed
HTML (Usage)
<img alt='' data-src='' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEXz8/SVuXQoAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg=='/>
  • src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEXz8/SVuXQoAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==' : source gambar dengan resolusi paling rendah
  • data-src='' : source gambar asli
JS (taruh diatas </body>)
const config = {
  rootMargin: '0px 0px 50px 0px',
  threshold: 0
const imgs = document.querySelectorAll('[data-src]');

if (typeof intersectionObserver != 'undefined') {
  // register the config object with an instance
  // of intersectionObserver
  let observer = new intersectionObserver(function (entries, self) {
    // iterate over each entry
    entries.forEach(entry => {
      // process just the images that are intersecting.
      // isIntersecting is a property exposed by the interface
      if (entry.isIntersecting) {
        // custom function that copies the path to the img
        // from data-src to src
        // the image is now in place, stop watching
  }, config);
  imgs.forEach(img => {
} else {
  imgs.forEach(img => {

function preloadImage(e) {
  var a = e.getAttribute('src'), b = e.getAttribute('data-src');
  if (b.trim() != ''){
    e.src = b.trim();

See the Pen Pure javascript lazy load images by dimas lanjaka (@dimaslanjaka) on CodePen.

0 Response to "Lazy load images blogger"

Post a comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Artikel Terkait