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='https://blogger.googleusercontent.com/img/proxy/AVvXsEjI6MvclZXd2doxNj1CYSURVRcQfQlMqLbnmYUuQWA2m5SPIEBljH7IXHIybUfyy5APOddK-sBYfaYz4DwTz0vC2iRRL-9BRnqt-QaH691ZLzXEdindLgThTk-ONk8DYE0BHVDNAVChX68j0RAaFMgeSNFbNPyT7jDnZynj0WMg-34sNKBpEPSkxw=w72-h58-p-k-no-nu' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEXz8/SVuXQoAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg=='/>

• src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEXz8/SVuXQoAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==' : source gambar dengan resolusi paling rendah
• data-src='https://blogger.googleusercontent.com/img/proxy/AVvXsEjI6MvclZXd2doxNj1CYSURVRcQfQlMqLbnmYUuQWA2m5SPIEBljH7IXHIybUfyy5APOddK-sBYfaYz4DwTz0vC2iRRL-9BRnqt-QaH691ZLzXEdindLgThTk-ONk8DYE0BHVDNAVChX68j0RAaFMgeSNFbNPyT7jDnZynj0WMg-34sNKBpEPSkxw=w72-h58-p-k-no-nu' : source gambar asli

JS (taruh diatas </body>)

<script>
//<![CDATA[
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
        preloadImage(entry.target);
        // the image is now in place, stop watching
        self.unobserve(entry.target);
      }
    });
  }, config);
  
  imgs.forEach(img => {
    observer.observe(img);
  });
} else {
  imgs.forEach(img => {
    preloadImage(img)
  });
}

function preloadImage(e) {
  var a = e.getAttribute('src'), b = e.getAttribute('data-src');
  if (b.trim() != ''){
    e.src = b.trim();
  }
}
]]>
</script>

FULL DEMO

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