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 debounce(fn, delay) {
  let timer = null;

  return function () {
    let context = this;
    let args = arguments;

    // 每次事件被触发时，都去清除之前的旧定时器
    if(timer) {
        clearTimeout(timer)
    }
    // 设立新定时器
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

const better_scroll = debounce(lazyload, 300);

document.addEventListener('scroll', better_scroll);