前面在图片懒加载一文中讲到什么是图片懒加载和用js怎么实现懒加载，本文记录一下图片懒加载插件 vue-lazyload的使用。

一、安装依赖包

npm

1
npm i vue-lazyload -S

yarn

1
yarn add vue-lazyload

二、全局注册插件

1
2
3
4
5
6
7
8
9
10
11
// 引入插件
import VueLazyload from 'vue-lazyload'
// 注册插件
const loadimage = require('./assets/loading.gif')
const errorimage = require('./assets/error.gif')
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: errorimage,
  loading: loadimage,
  attempt: 1
})

配置项参数说明：

键 描述 默认值 选项
preLoad 表示lazyload的元素,
距离页面底部距离的百分比.
计算值为(preload - 1)		 1.3 Number
error 加载失败后图片地址 ‘data-src’ String
loading 加载时图片地址 ‘data-src’ String
attempt 图片加载失败后的重试次数 3 Number
listenEvents 触发懒加载的事件 [
‘scroll’,
‘wheel’,
‘mousewheel’,
‘resize’,
‘animationend’,
‘transitionend’,
‘touchmove’
]		 无
adapter 注册img 的loading,loaded,error
三个状态的回调函数,
参数会暴露懒加载的img元素,
可以对其进行操作.		 { } 无
filter img未加载之前,
解析到src 的时候注册的回调函数.
可以在加载图片之前,对src进行修改.
注册在filter下的所有的函数都会执行		 { } 无
lazyComponent 是否启用懒加载组件.
组件中的内容
只有在出现在preload的
位置中才会加载组件.
这个lazyloadComponent
组件有个缺点
就是,组件在加载前
是什么都不渲染的,
这样子的话,有可能会影响布局,
以及加载前到加载后的切换不好,
有点突兀和生硬.		 false 无
dispatchEvent 触发dom事件 false Boolean
throttleWait 等待时长 200 Number
observer 是否启用IntersectionObserver, 这个api有兼容问题 false Boolean
observerOptions IntersectionObserver选项 { rootMargin: ‘0px’, threshold: 0.1 } 无
silent 不打印调试信息 true Boolean

三、在需要的组件中使用

1、v-lazy

1
2
3
4
5
<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

2、v-lazy-container

1
2
3
4
5
<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>

四、实现富文本里面图片的懒加载

1
2
3
4
5
6
7
<div  
     v-lazy-container="lazyConfig" 
     class="content" 
     v-html="htmlStr" 
     ref="content" 
     id="htmlContent">
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export default {
    ......
    data() {
        return {
            content: '',
            lazyConfig: {
                selector: 'img',
                error: 'https://www.wjnba.top/img/loading.gif',
                loading: 'https://www.wjnba.top/img/loading.gif'
            }
        }
    }，
    computed: {
        // 把副本中图片src替换为 data-src
        htmlStr() {
            return this.content?.replace(/(<img )([^>]*)(src=")([^"]*")([^>]*)(>)/g, (match, p1, p2, p3, p4, p5, p6) => {
                return `${p1 + p2}data-src="${p4}${p5}${p6}`
            })
        }
    },
}