JSFiddle - React, Tailwind, and code Playground

by ruirui

HTML

<head>
  <title>Lazy-Load</title>
  <style>
    img {
      display: block;
      width: 200px;
      height:200px;
      background-color: gray;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <img class="pic" alt="加载中" data-src="http://season.jpanj.com/001.jpg">
    <img class="pic" alt="加载中" data-src="http://season.jpanj.com/002.jpg">
    <img class="pic" alt="加载中" data-src="http://season.jpanj.com/003.jpg">
    <img class="pic" alt="加载中" data-src="http://season.jpanj.com/004.jpg">
    <img class="pic" alt="加载中" data-src="http://season.jpanj.com/005.jpg">
    <img class="pic" alt="加载中" data-src="http://season.jpanj.com/006.jpg">
    <img class="pic" alt="加载中" data-src="http://season.jpanj.com/007.jpg">
    <img class="pic" alt="加载中" data-src="http://season.jpanj.com/008.jpg">
    <img class="pic" alt="加载中" data-src="http://season.jpanj.com/009.jpg">
    <img class="pic" alt="加载中" data-src="http://season.jpanj.com/010.jpg">
    <img class="pic" alt="加载中" data-src="http://season.jpanj.com/011.jpg">
  </div>
</body>

JavaScript

const imgs = document.getElementsByTagName('img');
const viewHeight = window.innerHeight || document.documentElement.clientHeight;
let num = 0; // 避免每次都从第一张图片开始检查
function lazyload(){
  console.log('开始加载');
  for(let i = num; i < imgs.length; i++) {
    let distance = viewHeight - imgs[i].getBoundingClientRect().top;
    if(distance >= 0 ){ // 到达可视区域内
      imgs[i].src = imgs[i].getAttribute('data-src');
      num = i + 1;
    }
  }
}
lazyload();
window.addEventListener('scroll', lazyload, false);