什么是赖加载

图片懒加载，目的是为在可视区域的图片，不加载，进入可视区域时才加载；

核心技术

• img标签的src属性，当为空时不请求加载图片，只有设置了值时才会主动请求资源；因此我们可以动态给src设置值；

• 何时设置？判断图片是否在可视区域，使用dom元素的 getBoundingClientRect 获取区域；可视窗高度对比；

 <style>
    li {
      height: 900px;
    }

    li img {
      height: 100%;
      width: 100%;
    }
  </style>
  
  
<ul>
    <li>
      <img data-src="https://img1.baidu.com/it/u=2961974070,137066290&fm=26&fmt=auto&gp=0.jpg" />
    </li>
    <li>
      <img data-src="https://img1.baidu.com/it/u=395380977,272417941&fm=26&fmt=auto&gp=0.jpg" />
    </li>
    <li>
      <img data-src="https://img0.baidu.com/it/u=1999921673,816131569&fm=26&fmt=auto&gp=0.jpg" />
    </li>
    <li>
      <img data-src="https://img1.baidu.com/it/u=1538179465,4272098539&fm=26&fmt=auto&gp=0.jpg" />
    </li>
    <li>
      <img data-src="https://img2.baidu.com/it/u=2870582166,3293945055&fm=11&fmt=auto&gp=0.jpg" />
    </li>
    <li>
      <img data-src="https://img1.baidu.com/it/u=2015817847,3321715414&fm=11&fmt=auto&gp=0.jpg" />
    </li>
    <li>
      <img data-src="https://img0.baidu.com/it/u=3854185013,2953326380&fm=11&fmt=auto&gp=0.jpg" />
    </li>
    <li>
      <img data-src="https://img0.baidu.com/it/u=4275872654,1212470048&fm=26&fmt=auto&gp=0.jpg" />
    </li>
    <li>
      <img data-src="https://img1.baidu.com/it/u=347835087,3643833121&fm=26&fmt=auto&gp=0.jpg" />
    </li>
  </ul>

function debounce(func, wait) {
  let timer;
  return function () {
    let context = this; // 注意 this 指向
    let args = arguments; // arguments中存着e

    if (timer) clearTimeout(timer);

    timer = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

function loadImage(imgs) {
  let count = 0;
  let len = imgs.length;
  return function () {
    const viewHeight = window.innerHeight;
    for (let index = count; index < len; index++) {
      const img = imgs[index];
      if (img.getBoundingClientRect().top < viewHeight) {
        console.log(index, img.getBoundingClientRect().top);
        img.src = img.getAttribute("data-src");
        count++;
      }
    }
  };
}

const imgs = document.querySelectorAll("img");
const getImg = loadImage(imgs);
document.addEventListener("DOMContentLoaded", function () {
  getImg();
});

// 项目中此处使用防抖函数，降低scroll回调的函数平次
window.addEventListener("scroll", debounce(getImg, 300));

文章的目的不求点赞，只求自己能更好的理解，更重要的是动手尝试一次，加深记忆;否则看过了几天就忘记了；