js/vue//懒加载

1 参考 & 概念

超简单直观理解懒加载（Lazyload）

懒加载的原理及实现

什么是懒加载和预加载

原理：
先将 img标签中的 src 链接设为同一张图片（空白图片），将其真正的图片地址存储在 img 标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。
这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。

2 实例

<img src="统一空图片地址" data-src="真实图片地址">
imagesList[i].src = imagesList[i].getAttribute('data-src'); 注意 getAttribute

<img src="./loading.png" data-src="./5.1.png">
<img src="./loading.png" data-src="./7.1.png">
<img src="./loading.png" data-src="./8.1.png">
<img src="./loading.png" data-src="./10.1.png">
<img src="./loading.png" data-src="./10.2.png">
<img src="./loading.png" data-src="./10.3.png">
<img src="./loading.png" data-src="./10.4.png">
<img src="./loading.png" data-src="./12.1.png">
<img src="./loading.png" data-src="./12.2.png">
<img src="./loading.png" data-src="./12.3.png">
<img src="./loading.png" data-src="./12.4.png">
<img src="./loading.png" data-src="./12.5.png">
<img src="./loading.png" data-src="./12.6.png">
<img src="./loading.png" data-src="./12.7.png">
<img src="./loading.png" data-src="./12.8.png">
<img src="./loading.png" data-src="./12.9.png">
<img src="./loading.png" data-src="./12.10.png">
<img src="./loading.png" data-src="./12.11.png">
<img src="./loading.png" data-src="./12.12.png">
<img src="./loading.png" data-src="./12.13.png">

<script>
  function lazyload(){
    var imagesList = document.getElementsByTagName('img');  // 获取所有图片列表
    var length = imagesList.length; // 一共有多少张图片
    var n = 0; // n用来保存之前已经加载过的多少张图片，就可减少下面遍历的次数
    return function(){
      var clientHeight = document.documentElement.clientHeight;  // 浏览器可视区域的高度
      var scrollTop = document.documentElement.scrollTop;  // 页面被遮挡的高度
      for(var i = n;i<length;i++){
        if(imagesList[i].offsetTop<clientHeight+scrollTop){ // offsetTop获取图片顶部相对于页面顶部的距离，当它小于浏览器可视区域的高度和页面被遮挡的高度之和时，加载图片
          if(imagesList[i].getAttribute('src')==='./loading.png'){ //当该img的路径为'./loading.png'时才把图片的真实路径赋值给src
            imagesList[i].src = imagesList[i].getAttribute('data-src');
          }
          n = n + 1;
        }else{
          break;
        }
      }
    }
  }
  var a = lazyload();
  a();
  window.addEventListener('scroll', a, false); // 监听页面滚动事件，执行lazyload函数。
</script>