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.js怎样写一个轮播图

vue.js中使用无状态组件的方法介绍

vue.js事件处理教程及代码示例

vue.js如何带参数跳转

vue-mobile是什么

怎么查看vue.js的版本信息?

vue.js全家桶是什么

vue刷新404的问题解决方法

vue.js全家桶包含哪些

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




打赏

取消

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

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

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

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

评论

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