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();
function throttle(fn, delay) {
  let last = 0, timer = null;
  
  return function () { 
    let context = this;
    let args = arguments;
    let now = +new Date();
    
    if (now - last < delay) { // 当时间间隔小于设置的时间间隔，则设置一个新的定时器
       clearTimeout(timer)
       timer = setTimeout(function () {
          last = now;
          fn.apply(context, args);
        }, delay)
    } else { // 如果超过，则进行回调
        last = now;
        fn.apply(context, args);
    }
  }
}

const better_scroll = throttle(lazyload, 300);

document.addEventListener('scroll', better_scroll);