为什么要使用图片懒加载呢？什么是图片懒加载呢？
1. 原理
图片懒加载是前端页面优化的一种方式，在页面中有很多图片的时候，图片加载就需要很多时间，很耗费服务器性能，不仅影响渲染速度还会浪费带宽，为了解决这个问题，提高用户体验，所以就出现了懒加载这种方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。
2. 实现
思路：在图片没有进入可视区域时，先不给的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。图片的真实地址需要存储在data-src中。
图片没有进入可视区域，也就是说图片的offsetTop需要小于页面的可视高度，但想一想，当图片在页面的下方的时候呢，需要页面滚动了一段距离之后才能看到图片，所以这里需要满足img.scrollTop < 页面的可视区域高度+页面滚动的高度，这里是实现图片懒加载的关键，接下来看具体代码的实现
-
HTML
......
-
CSS
*{ margin: 0; padding: 0; } img{ vertical-align: top; width: 100%; height: auto; }
-
JS
let img = document.getElementsByTagName('img'); let n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历 lazyload(); window.addEventListener('scroll',lazyload); function lazyload(){ //监听页面滚动事件 var seeHeight = window.innerHeight; //可见区域高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for(let i = n; i < img.length; i++){ if(img[i].offsetTop < seeHeight + scrollTop){ if(img[i].getAttribute("src") == 'loading.gif'){ img[i].src = img[i].getAttribute("data-src"); } n = i + 1; } } }
......
图片懒加载也可以结合节流和防抖函数进行使用，优化页面。下次就来介绍一下节流和防抖如何实现！
