JS原生 实现图片懒加载

重点集合

<div class="box"> 
      <!-- 图片的src路径为空   lazyload="true"    data-original 值为真实的图片地址 -->
       <img src=""  class="img" lazyload="true" data-original="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg">
    </div>

<script type="text/javascript">
    window.onload = function () {
    
    
      //获取当前浏览器的视口高度
      var viewHeight = document.documentElement.clientHeight;
      console.log(viewHeight)
      //鼠标滚动回调
      function lazyload() {
    
    
          var img = document.getElementsByClassName('img'); //获取所有图片集合
          console.log(img)
          //遍历图片集合
          for (let item of img) {
    
    
              //获取图片距视口顶部的距离
              var imgHeight = item.getBoundingClientRect();
              //判断当图片出现在视口160px时把地址放到src中，显示出图片
              if (imgHeight.top < (viewHeight - 360)) {
    
    
                  item.src = item.getAttribute("data-original")
                   console.log(item.src)
              }
          }
      }

      lazyload();    //页面加载时把当前视口中的图片加载进来
      document.addEventListener('scroll', lazyload);
  }
  </script>

HTML data-* 属性

使用 data-* 属性来嵌入自定义数据
所有主流浏览器都支持 data-* 属性
定义和用法
data-* 属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

data-* 属性包括两部分：

属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符
属性值可以是任意字符串
注释：用户代理会完全忽略前缀为 “data-” 的自定义属性。

getBoundingClientRect 方法介绍

理解：getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

1.语法：这个方法没有参数。

        rectObject = object.getBoundingClientRect();

2.返回值类型：

rectObject.top：元素上边到视窗上边的距离;

rectObject.right：元素右边到视窗左边的距离;

rectObject.bottom：元素下边到视窗上边的距离;

rectObject.left：元素左边到视窗左边的距离;