JSFiddle - React, Tailwind, and code Playground

by youwei long

HTML

<script src="//cdn.bootcss.com/lodash.js/4.17.11/lodash.min.js"></script>
<img src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png"...

CSS

img {
  display: block;
  margin: 10px auto;
  width: 100px;
  height: 100px;
}

JavaScript

function queryImage() {
  return Array.from(document.querySelectorAll('img'))
}
function scrollFn() {
  const images = queryImage()
  const windowHeight = window.innerHeight
  images.forEach(image => {
    const rect = image.getBoundingClientRect()
    if (rect.top > 0 && rect.top < windowHeight && image.getAttribute('data-src')) {
      image.src = image.getAttribute('data-src')
      image.onload = function() {
        image.removeAttribute('data-src')
      }
      image.onerror = function() {
        image.src = 'http://iph.href.lu/100x100?text=img%20error&fg=E74C3C'
      }
    }
  })
}
document.addEventListener('scroll', _.throttle(scrollFn, 200))
scrollFn()