vuevue-cli3构建项目中实现图片懒加载

Posted 2021-03-20 wannananana

前两天正好写了文章如何用实现图片懒加载【性能优化】JS实现图片懒加载，今天在使用vue构建项目的时候就遇到了要做图片懒加载的优化需要，本想把前两天的代码直接copy过来的，后来想查查看有没有更简便的方法，果不其然，vue中直接有插件可以使用，看了下实现时候的效果，实现原理都和原生js是一样的，vue果然真香！

接下来我们来讲vue-lazyload插件的使用：

1、安装插件

cnpm i vue-lazyload -S

 

2、入口文件main.js中配置：

import Vue from ‘vue‘
import App from ‘./App.vue‘
import VueLazyLoad from ‘vue-lazyload‘ // 引入插件
import errorImg from ‘./assets/img/error.jpg‘
import loadingImg from ‘./assets/img/loading.jpg‘

Vue.config.productionTip = false

Vue.use(VueLazyLoad, { // 注意：此项一定要写在new Vue（{}）之前，否则会报错：[Vue warn]: Failed to resolve directive: lazy
    preload: 1.3, // 预加载高度比例
    error: errorImg, // 图片路径出错时加载图片 此处
    loading: loadingImg, // 预加载图片
    attempt: 6, // 尝试加载图片数量
    observer: true,
    observerOptions: {
        rootMargin: ‘0px‘,
        threshold: 0.1
    }
})

new Vue({
    render: h => h(App),
}).$mount(‘#app‘)

 

3、修改图片显示方式为懒加载

// 原本img写法：
<img v-for="item in imgList" :src="item.src" :alt="item.name">

// 懒加载写法：
<img v-for="item in imgList" v-lazy="item.src" :alt="item.name">

 

注意：一定要注意第二步中的配置，切不可出现报错的那种写法。

 

【参考文章】

vue项目中实现图片懒加载

vue-lazyload官方文档