JSFiddle - React, Tailwind, and code Playground

by youwei long

HTML

<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
<img class="img" src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img class="img" src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img class="img" src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img class="img" src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img class="img" src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img class="img" src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img class="img" src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img class="img" src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img class="img" src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img class="img" src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img class="img" src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img class="img" src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img class="img" src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />
<img class="img" src="https://i.loli.net/2018/12/09/5c0bfcc33d7f8.png" data-src="https://i.loli.net/2018/11/23/5bf75ff39e0a4.jpg" />

CSS

.img {
  display: block;
  margin: 10px auto;
}

JavaScript

function queryImage() {
  return Array.from(document.querySelectorAll('.img'))
}
const observer = new IntersectionObserver(changes => {
  changes.forEach(item => {
    const intersectionRect = item.intersectionRect
    const img = item.target
    if (intersectionRect.height * intersectionRect.width > 0) {
      img.addEventListener('load', () => {
        observer.unobserve(img)
        img.removeAttribute('height')
      })

      img.addEventListener('error', () => {
        img.src = 'http://iph.href.lu/100x100?text=img%20error&fg=E74C3C'
        observer.unobserve(img)
      })
      /* 假装模拟1s */
			setTimeout(_ => {
      	const src = img.getAttribute('data-src')
      	img.src = src
      }, 1000)
    }
  })
})
queryImage().forEach(img => {
  observer.observe(img)
})