惰性加载 - 爱码网

关于惰性加载

在讲图片的惰性加载前，我们先来聊聊惰性加载。惰性加载又称为延迟加载、懒加载等，还有个好听的英文名字叫做 "lazyload"。需要注意的是，惰性加载并不只是图片的专利，Javascript 中函数也有惰性加载的概念，而在 Javascript 异步加载中还有个 LazyLoad类库，而图片的惰性加载库（lazyload）与之完全是两个概念，这些一定要弄清楚，以免混淆概念。

图片的惰性加载是啥意思？为什么要用它？当我们页面上的东西越来越丰富的时候，我们发现页面的加载速度却越来越慢，而图片的加载量无疑是 HTTP 请求里面的大头。其实很多时候，你把整个页面加载完，用户却不会滑动到最下面，也就是说很多东西其实白白加载了。因为图片的加载是大头，所以我们先拿图片开刀，我们假设，如果试图加载一个 HTML 页面，图片先不加载，当用户将页面往下滑动，图片该出现在可视区域时，再将该图片加载，这样就能将一开始打开页面的 HTTP 请求量降低，这就是图片的惰性加载。

实现

图片的惰性加载实现方式其实很简单。

在 HTML 文件中将需要惰性加载的图片的 src 属性置为一个相同的地址（一般设置为一张 loading 图），这样这张图只会加载一次（第二次即会读取缓存），或者干脆置为空（用户体验不好），将真实的图片地址存储在别的属性中（比如 data-original 属性)
监听事件（比如 scroll 事件），判断需要惰性加载的图片是否已经在可视区域，如果是，则将 src 属性替换成 data-original 属性值

接着我们来简单写下代码。

首先，按照第一步将真实的图片地址藏在 data-original 属性中。这里我假设所有图片都要进行惰性加载，现实开发中如果肯定是在第一屏的图片，它的 src 完全可以直接指向真实的地址。

<ul>
  <li class='lazy'><img data-original='images/0.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/1.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/2.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/3.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/4.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/5.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/6.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/7.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/8.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/9.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/10.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/11.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/12.jpg' src='images/loading.gif'/></li>
</ul>

View Code