vue.js怎么使用懒加载


本文摘自PHP中文网,作者coldplay.xixi,侵删。

vue.js使用懒加载的方法:首先安装lazyload;然后在【main.js】中全局引用, 并配置图片;最后vue文件中将需要懒加载的图片绑定【v-bind:src】修改为【v-lazy】。

本教程操作环境:windows10系统、vue2.9,本文适用于所有品牌的电脑。

【相关文章推荐:vue.js】

vue.js使用懒加载的方法:

1、安装lazyload

1

npm install lazyload -s

2、在main.js中全局引用, 并配置图片

1

2

3

4

5

6

7

8

9

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

1

<img v-lazy="'@/assets/images/27.png'" class="images-line">

阅读剩余部分

相关阅读 >>

vue.js是前端框架吗?

vue 的 render 方法中 h 是什么?

vue的响应式原理是什么?

vue-mobile是什么

vue.js与微信小程序区别是什么

vue.js为什么要镜像

vue.js适用于什么

5个好用的vue.js库推荐

微信小程序能不能用vue.js

vue.js中v-html渲染的dom添加scoped的样式的方法介绍

更多相关阅读请进入《vue.js》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...