原生JS实现图片懒加载

前言

网站中的图片每个都有几MB甚至十几MB，如果一个网站的图片较多，一次性全部加载会使得网站加载速度缓慢，导致用户流失。
图片懒加载可以很好的解决这一问题…

图片懒加载就是当图片进入可视区域后，再进行加载，而那些尚未进入可视区域的图片，先不加载，这样可以解决网页加载慢的问题，改善用户体验。很多网站都可以很明显的看出来使用了图片懒加载，例如淘宝等。

原生JS实现图片懒加载

原生JS实现图片懒加载的思路是，先赋予img标签一个空的src或者一张小图片的src，将这张图片真正的src定义在一个自定义属性中，例如这里我们定义在data-src中，当图片进入可视区域后，再将data-src中的值赋给src，这样便实现了图片的懒加载功能。

html代码如下:

<img src="" data-src="picture01.jpg" style="display:block;width: 700px;height: 400px;">
<img src="" data-src="picture02.jpg" style="display:block;width: 700px;height: 400px;">
<img src="" data-src="picture03.jpg" style="display:block;width: 700px;height: 400px;">
<img src="" data-src="picture04.jpg" style="display:block;width: 700px;height: 400px;">
<img src="" data-src="picture05.jpg" style="display:block;width: 700px;height: 400px;">
<img src="" data-src="picture06.jpg" style="display:block;width: 700px;height: 400px;">

JS的思路就是

1. 先通过document.querySelectorAll('img')获取到网页中所有img标签，储存在imgArr数组中。
2. 再获取浏览器可视高度H：document.documentElement.clientHeight和滚动条滚动距离S：document.body.scrollTop || document.documentElement.scrollTop，这里“或”是考虑到浏览器兼容，有的浏览器使用前一个，有的使用后一个，但是使用其中之一时，另一个为0，所以用两者取或。
3. 获取图片顶部与网页顶部距离T:imgArr[i].offsetTop。
4. 比较T与H+S的值，若T大于H+S说明图片到了可视区域，将data-src的值赋给src，实现图片的加载。
5. 第二点到第四点需要在网页加载时window.onload和滚动条滚动时window.onscroll进行监听。

代码如下，这里定义n来记录该加载第几个图片，为方便演示，将可视高度减小了一部分，可以看到从未加载到加载的过程。

var imgArr = document.querySelectorAll('img');
var n = 0;
window.onload=window.onscroll = function() {
    var H = document.documentElement.clientHeight;
    var S = document.body.scrollTop || document.documentElement.scrollTop;
    for (var i = n; i < imgArr.length; i++) {
        if (imgArr[i].offsetTop < seeHeight + scrollTop-100) {
            if (imgArr[i].getAttribute('src') == '') {
                imgArr[i].src = imgArr[i].getAttribute('data-src');
            }
            n = i + 1;
        }
    }
};