Lazy load images blogger

Mempercepat laman web
Meningkatkan rating pagespeed

HTML (Usage)


<img alt='' data-src='https://lh3.googleusercontent.com/proxy/FCTXDOBcEj5ojJZCa5wsRX4hG0C1qod8MXxYlCcvUGT7EGMROVrUqXFf0LAuxtvvRaFKPr3mn-yUl3dMZj_ygE--d2lPheO6CSUofHexbWd1LQ6NV4NbJCReDlMs=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://lh3.googleusercontent.com/proxy/FCTXDOBcEj5ojJZCa5wsRX4hG0C1qod8MXxYlCcvUGT7EGMROVrUqXFf0LAuxtvvRaFKPr3mn-yUl3dMZj_ygE--d2lPheO6CSUofHexbWd1LQ6NV4NbJCReDlMs=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.

Lazy load images blogger - WMI

Tags