跳转到主内容
趣航编程网 - 趣学编程,启航技术之路!

vue.js怎么使用懒加载

vue.js使用懒加载的方法:首先安装lazyload;然后在【main.js】中全局引用, 并配置图片;最后vue文件中将需要懒加载的图片绑定【v-bind:src】修改为【v-lazy】。 本教程操作环境:windows10系统、vue2.9,本文适用于所有品牌的电脑。 【相关文章推荐: vue.js 】 vue.js使用懒加载的方法: 1、安装lazyload 立即学习 “ 前端免费学习笔记(深入) ”; vue.js 2.0离线手册(CHM版) vue.js 2.0中文离线手册(CHM版) 下载
npm install lazyload -s
2、在main.js中全局引用, 并配置图片
import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload) //默认配置 // 或者是自己配置预加载图片 Vue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png', loading: 'dist/loading.gif', attempt: 1 })
3、vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy
4、lazyload引用相对路径的图片引用不成功?运营require引用图片
相关免费学习推荐: JavaScript (视频)

相关文章