原生 JS 实现图片懒加载

1、什么是懒加载？

懒加载就是延迟加载的意思，比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载。

gif.gif

2、为什么要懒加载？

懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载出来用户也早就走了。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。

总结两个点：

全部加载的话会影响用户体验
浪费用户的流量，有些用户并不像全部看完，全部加载会耗费大量流量。

3、懒加载实现原理？

原理：大家都知道，一张图片就是一个标签，而图片的来源主要是 src 属性。浏览器是否发起亲求就是根据是否有 src 属性决定的。

既然这样，那么我们就要对标签的 src 属性下手了，在没进入可视区域的时候，我们先不给这个标签赋 src 属性，这样岂不是浏览器就不会发送请求了。

我们知道了从标签下手，那么更重要的就是可视区域的判断了。

4、与懒加载有关的 API

① 获取屏幕可视区的高度

document.documentElement.clientHeight

MDN：这个属性是只读属性，对于没有定义 CSS 或者内联布局盒子的元素为 0，否则，它是元素内部的高度（单位像素），包含内边距，但不包括滚动条、边框和外边距。

v2-ed3501641e343f3e67929f7ee13f359e_720w.jpg

② 获取元素相对于文档顶部的高度

element.offsetTop

MDN：为只读属性，它返回当前元素相对其 offsetParent 元素的顶部距离。

③ 获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离

document.documentElement.scrollTop

MDN：属性可以获取或设置一个元素的内容垂直滚动的像素数。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为 0。

④ 通过上面三个API，我们获得了三个值：可视区高度、元素相对于其父元素容器顶部的距离、浏览器窗口顶部与容器元素顶部的距离也就是滚动条滚动的高度。

v2-af1ab0c5f34e468e8647135c1f9f51e4_720w.jpg

⑥ 如果：offsetTop - scrollTop < clientHeight 则图片进入可视区内，则被请求。

五、代码实现

① 第一种实现方式




    
    
    Document

② 第二种实现方式
利用 getBoundingClientRect() 来获取元素的大小及位置。
MDN：该方法返回元素的大小及其相对于是视口的位置。

v2-641fabfd753a1fa5f4749cc8d72d61b0_720w.jpg

实现方式：
懒加载的一个重点就是要知道什么时候图片是进入了可视区内，那么就上面这张图而言，我们有什么方法判断图片进入了可视区呢。
其实很简单：我们先获取图片到可视区顶部的距离,并获取到可视区的高度：

var bound = el.getBoundingClientRect();
var clientHeight = window.innerHeight;//这个和前面获取可视区高度的效果一样，只是兼容性问题

当我们滚动条向下滚动的时候，bound.top 值会变得越来越小，也就是图片到可视区顶部的距离也越来越小，当 bound.top == clientHeight 时，说明土片马上就要进入可视区了，只要我们在滚动，图片就会进入可视区，那么就需要请求资源了。也就是说，在 bound.top<=clientHeight时，图片是在可视区域内的。

代码：




    
    
    Document