标签：fail art rect res www 如何 lis color 直接
前两天正好写了文章如何用实现图片懒加载【性能优化】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">
注意：一定要注意第二步中的配置，切不可出现报错的那种写法。
【参考文章】
标签：fail art rect res www 如何 lis color 直接
原文地址：https://www.cnblogs.com/wannananana/p/12103199.html
