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, interval) {
  let last = 0; // 上次触发回调的时间
  
  return function () {
      let context = this; // 调用时this上下文
      let args = arguments; // 调用时传入的参数
      let now = +new Date(); // 触发本地事件的回调
  		console
      if (now - last >= interval) { // 判断上次触发时间和本地触发时间间隔是否小于规定间隔
          last = now;
          fn.apply(context, arguments);
      }
    }
}

const better_scroll = throttle(lazyload, 500);

document.addEventListener('scroll', better_scroll);