图片懒加载原理以及实现

1、HTML5自定义属性data-前缀，data-固定写法 data-namename自定义，如下面的data-src（ dataset
）
先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src）,然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。

<div id="box">
  <ul>
    <li>
      <img data-src="./图片懒加载/1.jpg" alt="">
    </li>
    <li>
      <img data-src="./图片懒加载/2.jpg" alt="">
    </li>
    <li>
      <img data-src="./图片懒加载/3.jpg" alt="">
    </li>
    </div>

• 判断条件
  window.innerHeight可以获取到这个窗口的高度(不包括工具栏和滚动条)。getBoundingClientRect()方法用来获取页面中某个元素的左、上、右、下分别相对浏览器视窗的位置，返回的是一个矩形对象，包括四个属性，分别是left 、top、right、bottom。分别表示元素各边与页面上边和左边的距离。
  基本的判断就是如果该图片距离窗口上方的位置小于窗口的高度（也就是说该图片已经进入了窗口），那么就将该图片的src属性赋为data-src找那个存的图片路径。
  然后全局绑定scroll事件，在滚动页面的时候，图片进入到窗口后，500ms之后才会显示出图片。

<script>
  function imgonload() {
    let img = document.querySelectorAll("img");
    /*console.log(img);*/
    for(let i=0; i<img.length; i++) {
      if(img[i].getBoundingClientRect().top < window.innerHeight) {
        //图片一旦有src就会加载出来，所以图片的路径不会放在src中，而是一个自定义的属性data-src中
        img[i].src = img[i].dataset.src;
      }
    }
  }
	//防抖函数
  function scollImg(fn) {
    let timer = null;
    let context = this;
    return function () {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(context);
      }, 500)
    }
  }
 	 	window.onload = imgonload;
  		window.onscroll = scollImg(imgonload);
</script>