Vanilla JS Lazy Load

In this example below you will see how to do a Vanilla JS Lazy Load with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 007design, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 007design ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Vanilla JS Lazy Load</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div>
  <img src="//placehold.it/50x50">
  <img data-lazy-load="//placehold.it/50x200"/>
  <img data-lazy-load="//placehold.it/50x60"/>
  <img data-lazy-load="//placehold.it/50x70"/>
  <img data-lazy-load="//placehold.it/50x80"/>
  <img data-lazy-load="//placehold.it/50x90"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
  <img data-lazy-load="//placehold.it/50x50"/>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/007design/vanilla-js-lazy-load-ELdwXY */
img[data-lazy-load] {
  border: 1px solid black;
  margin-bottom: 10px;
  display: block;
  opacity: 0;
}
img[data-lazy-load].loading {
  opacity: 1;
  transition: opacity linear 2s;
}


/*Downloaded from https://www.codeseek.co/007design/vanilla-js-lazy-load-ELdwXY */
const nodes = document.querySelectorAll('[data-lazy-load]');
const imgs = [].slice.call(nodes, 0); 

function getOffset(el) {
  el = el.getBoundingClientRect();
  return {
    left: el.left + window.scrollX,
    top: el.top + window.scrollY
  }
}

function checkLazyImages() {
  for (var a=0; a<imgs.length;) {
    const i = imgs[a];
    if (getOffset(i).top <= window.scrollY+window.innerHeight) {
      i.setAttribute('src', i.getAttribute('data-lazy-load'));
      i.classList.add('loading');
      imgs.splice(a, 1);
    } else {
      a++;
    }
  }
}

document.addEventListener('scroll', function(e) {
  checkLazyImages();
})

window.addEventListener('load', function(e) {
  checkLazyImages();
})

Comments