【转载】懒加载原理(1)

2.懒加载思路及实现

---

实现懒加载有四个步骤，如下：

1.加载loading图片

2.判断哪些图片要加载【重点】

3.隐形加载图片

4.替换真图片

1.加载loading图片是在html部分就实现的，代码如下：

2.如何判断图片进入可视区域是关键。

引用网友的一张图，可以很清楚的看出可视区域。

如上图所示，让在浏览器可视区域的图片显示，可视区域外的不显示，所以当图片距离顶部的距离top-height等于可视区域h和滚动区域高度s之和时说明图片马上就要进入可视区了，就是说当top-height<=s+h时，图片在可视区。

这里介绍下几个API函数：

页可见区域宽： document.body.clientWidth;

网页可见区域高： document.body.clientHeight;

网页可见区域宽： document.body.offsetWidth (包括边线的宽);

网页可见区域高： document.body.offsetHeight (包括边线的宽);

网页正文全文宽： document.body.scrollWid