Vue的图片懒加载

最新推荐文章于 2023-08-12 16:54:25 发布

小鑫学习笔录

最新推荐文章于 2023-08-12 16:54:25 发布

阅读量73

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_51619945/article/details/125645870

版权

图片懒加载

vue-lazyload - npm

安装插件

npm i vue-lazyload

在main.js中

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vuelazyload'
Vue.use(VueLazyload) 
// or with options
Vue.use(VueLazyload, 
{  preLoad: 1.3,    
 error: 'dist/error.png',  // 错误的图片
loading: 'dist/loading.gif', // 等待时的图片
 attempt: 1
 })
  new Vue({  
  el: 'body', 
   components: {   App  }
})

实例使用:

import atm from '@/assets/1.gif'
// 引入插件
import VueLazyload from 'vue-lazyload'
//注册插件
Vue.use(VueLazyload,{
  //懒加载默认的图片
  loading:atm
})
// 组件使用时
<!-- 在路由跳转的时候记得带id  自定义插件v-lazy-->
<router-link :to="`/detail/${good.id}`">
  <img v-lazy="good.defaultImg" />
</router-link>