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='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.

Subscribe to receive free email updates:

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.