Vue图片懒加载vue-lazyload-使用

最新推荐文章于 2024-09-27 13:58:28 发布

小杨的羊

最新推荐文章于 2024-09-27 13:58:28 发布

阅读量141

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/yang_NC/article/details/120885028

版权

1、安装插件

npm install vue-lazyload --save-dev

2、在main.js中引用

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
 
// or with options 也可以直接在这里设置参数
Vue.use(VueLazyload, {  
  preLoad: 1.3,   //预加载的宽高比 | 可选
  error: 'dist/error.png',//图片加载失败时使用的图片源
  loading: 'dist/loading.gif',//图片加载的路径
  attempt: 1//尝试加载次数 | 可选
})

3、将图片引用的 :src 换成 v-lazy

用例
在这里插入图片描述