言

图片懒加载也是比较常见的一种性能优化的方法，最近在用vue做一个新闻列表的客户端时也用到了，这里就简单介绍下实现原理和部分代码。

实现原理

加载页面的时候，图片一直都是流量大头，针对图片的性能方法也挺多的比如base64、雪碧图等；懒加载也是其中一种，主要原理是将非首屏的图片src设为一个默认值，然后监听窗口滚动，当图片出现在视窗中时再给他赋予真实的图片地址，这样可以保证首屏的加载速度然后按需加载图片。

具体代码

首先在渲染时，图片引用默认图片，然后把真实地址放在data-*属性上面。

<image src='./../assets/default.png' :data-src='item.allPics' class='lazyloadimg'>

然后是监听滚动，直接用window.onscroll就可以了，但是要注意一点的是类似于window的scroll和resize，还有mousemove这类触发很频繁的事件，最好用节流(throttle)或防抖函数(debounce)来控制一下触发频率。underscore和lodash里面都有封装这两个方法，这里先不多做介绍了。

接着要判断图片是否出现在了视窗里面，主要是三个高度：1，当前body从顶部滚动了多少距离。2，视窗的高度。3，当前图片距离顶部的距离。offsetTop相关属性可以参考这里，具体代码如下：

window.onscroll=_.throttle(this.watchscroll, 200);

watchscroll () {

var bodyScrollHeight=document.body.scrollTop;// body滚动高度

var windowHeight=window.innerHeight;// 视窗高度

var imgs=document.getElementsByClassName('lazyloadimg');

for (var i=0; i < imgs.length; i++) {

var imgHeight=imgs[i].offsetTop;// 图片距离顶部高度

if (imgHeight < windowHeight + bodyScrollHeight) {

imgs[i].src=imgs[i].getAttribute('data-src');

img[i].className=img[i].className.replace('lazyloadimg','')

}

}

}

学习交流加群：230354270

结语

大概内容就这么多了，下次可能会补充一下防抖节流源码的实现。最后再补充两个常见的滚动判断：

1.页面滚动离开首屏(这时可显示回到顶部的按钮):document.body.scrollTop > window.innerHeight

2.页面滚动到底部了(这时可去调接口获取更多内容)：window.scrollY + window.innerHeight > document.body.offsetHeight

azyload图片加载通常用在图片很多的项目里，需要翻好几页，如果一打开页面就将所有的图片加载出来，会耗费很多性能，以及会让用户等待较长时间，为了有一个更好的用户体验，Lazyload图片懒加载就应运而生。Lazyload让图片只有在可视区域时才会加载出来。

应用这个组件需要注意的点是，即便我们之前有安装和引入vant框架，但这个Lazyload需要重新安装重引用。

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

准备工作：

1. 创建一个页面: Lazyload.vue
2. 在router.js里配置Lazyload页面的路由

{
 path: '/lazyload',
 name: 'lazyload',
 component: ()=> import('./views/Lazyload')
 }

1. 在index.vue里添加一项

<a href="javascript：void(0)" @click="$router.push('/lazyload')">
 <van-col span="6" class="marb20">
 <van-icon name="pending-deliver" />
 <div>Toast 图片懒加载</div>
 </van-col>
</a>

至今为止呢，我们的首页显示的样式子是这样滴?不知道不觉间我们已经学完了33个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。

代码演示Lazyload 图片懒加载：

基本方法：

<img 
 class="img" 
 v-for="img in imageList"
 v-lazy="img"
>

v-lazy: 懒加载的图片，其值为图片的路径。

data() {
 return {
 imageList: [
 require('../assets/01.jpg'),
 require('../assets/02.jpg'),
 require('../assets/03.jpg'),
 require('../assets/04.jpg'),
 ]
 }
 },

就在演示这段代码时总是出错，说找不到指令，最后发现是vant又更新了，需要重新安装，这才成功。说明vant框架更新的频率很高，用着会越来越好用的。以上代码需要说明一点的是在data里引入图片的方式，如果直接引用路径会因为定位不到相对路径会出错，需require一下才可以。如图：

背景懒加载：

<div 
 class="img" 
 v-for="img in imageList"
 v-lazy:background-image="img"
 />

css部分：

.img {
 width: 100%;
 height: 300px;
 background-size: 100%
}

背景图片也是可以懒加载的，只不过改成了v-lazy:background-image="img"。这里需要注意的一点是需要给这个容器定义宽度和高度以及background-size。背景图片显示不出来。

模块懒加载：

懒加载模块会用到lazy-component，需要在main.js里设置一下。

Vue.use(VueLazyload, {
 lazyComponent: true
});

options有如下, options是在引入VueLazyload时设置：

loading: 加载时的图片

error: 错误时的图片

preload: 预加载高度的比例

azyComponent: 是否能懒加载模块

<lazy-component>
 <img 
 class="img"
 v-for="img in imageList"
 v-lazy="img"
 >
 </lazy-component>

更多关于Lazyload应用方法可以看下官方文档

到目前为止呢，Lazyload就演示完了！庆祝一下我们又学完一个组件啦！

今天就到这里啦。休息休息一会儿吧?明天继续加油噢！加油