vue的图片懒加载 vue的图片懒加载

在webpack环境下的图片懒加载用法
第一步是下载依赖包 npm i vue-lazyload -S
第二步是在main.js入口文件导入

import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload)//这个是默认配置 //或者使用下面的配置Vue.use(VueLazyload, { preLoad: 1.3, //预载高度比例 error: 'dist/error.png',//加载后映像的src失败 loading: 'dist/loading.gif',//加载时图片的src attempt: 1//尝试次数 })

第三步在模板中使用

> export default{ data(){ return{ list:['./images/a.jpg','./images/b.jpg','./images/c.jpg'] } }

第四步也可以在样式中是实现加载时和加载错误时的样式

="scoped"> img[lazy=loading] { //在这时可以设置加载时的样式或背景图片 } img[lazy=error] {} img[lazy=loaded] {} .lazy[lazy=loading] {} .lazy[lazy=error] {} .lzay[lazy=loaded] {}

在CND环境的用法

- 锐客网 ="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"> ="https://unpkg.com/vue-lazyload/vue-lazyload.js"> > img[lazy=loading]{ background-color: #F94A69; } > Vue.use(VueLazyload) var vm=new Vue({ el:"#app", data:{ list:['./images/a.jpg','./images/b.jpg','./images/c.jpg'] }})