实现图片懒加载 getBoundingclientRect

懒加载是针对图片加载时机的优化，在一些大量使用图片的网站，如果在首屏加载全部的资源会出现首屏白屏的现象，所以现在有一系列的操作来实现首屏优化，路由懒加载，图片懒加载。

懒加载实现目的
懒加载的目的是当页面的图片进入到用户的可是范围之内再加载图片的一种优化方式。

可以层架首屏的加载速度，当用户打开页面的瞬间，呈现出来的只是首屏，只需要把首屏的资源图片加载出来就可以了，至于没有出现再可是区域的图片就可以暂时不用加载，只有当出现在用户的可视范围的时候再加载，这样对于性能的压力也小，可以提高用户体验。

实现
在页面初始化的时候，
<img>图片的src实际上是放在data-src属性上的，当元素处于可视范围内的时候，就把data-src赋值给src属性，完成图片加载。

// 在一开始加载的时候
<img data-src="http://xx.com/xx.png" src="" />
// 在进入可视范围内时
<img data-src="http://xx.com/xx.png" src="http://xx.com/xx.png" />

<div>使用背景图来实现，原理也是一样的，把background-image放在，在可视范围时，就把data-src赋值给src属性，完成图片加载。

// 在一开始加载的时候
<div
  data-src="http://xx.com/xx.png"
  style="background-image: none;background-size: cover;"
></div>

// 在进入可视范围内时
<div
  data-src="http://xx.com/xx.png"
  style="background-image: url(http://xx.com/xx.png);background-size: cover;"
></div>

实现一个懒加载
基于上面的原理来实现一个图片懒加载
新建一个 index.html 中，为这些图片预置 img 标签：

 <div class="box">
    <ul>
      <li>
        <img src="http://streetwill.co/uploads/post/photo/896/medium_2x__Pcwl5tp7xzzvC-AeAUgSCCbwyJFry59kZkqimtXNnY.jpg" baseImage="http://streetwill.co/uploads/post/photo/896/medium_2x__Pcwl5tp7xzzvC-AeAUgSCCbwyJFry59kZkqimtXNnY.jpg" >
      </li>
      <li>
        <img baseImage="http://streetwill.co/uploads/post/photo/896/medium_2x__Pcwl5tp7xzzvC-AeAUgSCCbwyJFry59kZkqimtXNnY.jpg" >
      </li>
      <li>
        <img baseImage="http://streetwill.co/uploads/post/photo/896/medium_2x__Pcwl5tp7xzzvC-AeAUgSCCbwyJFry59kZkqimtXNnY.jpg" >
      </li>
    </ul>
  </div>
//原理这里需要获取到可视窗口的高度(window.innerHeight),在获取到所有的img图片距离可以窗口上边的距离(imgObj.getBoundingclientRect().top),需要使用到的两个API进行大小的比较,如果是img已经出现在窗口的可视区域内的时候再给img的src属性进行赋值
(function(){
      let images = document.querySelectorAll('img');
      let lis = document.querySelectorAll('li');
      let winHeight = window.innerHeight;
      imgScroll();
      window.onscroll = imgScroll;
      function imgScroll(){
        for (let i = 0; i < images.length; i++) {
          const element = images[i];
          if(lis[i].getBoundingClientRect().top < winHeight){
            element.src = element.getAttribute('data-src');
          }
        }
      }
    })();