vue通过vue-lazyload实现图片懒加载的代码详解

更新时间：2024年02月23日 10:20:37 作者：小安吖~

这篇文章主要给大家介绍了vue通过vue-lazyload实现图片懒加载,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下

一、安装vue-lazyload

1）vue中安装：

npm install vue-lazyload --save-dev

2）vue-cli中安装：

npm install vue-lazyload -D

3）在HTML中安装：

<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
  Vue.use(VueLazyload)
  ...
</script>

二、在main.js中进行引用

// 引入插件
import VueLazyload from 'vue-lazyload'
// 注册插件
Vue.use(VueLazyload,{
    error: require('./assets/img/404nofind.jpg'), //当加载图片失败的时候
    loading: require('./assets/img/loading.png'), //当加载图片成功的时候
    preLoad:1
})

一些配置的参数

三、在需要的组件中使用

1）v-lazy

<ul>
  <li v-for="(img,a) in list" :key=a>
    <img v-lazy="img.name" class="imgs">
  </li>
</ul>
 
  data(){
     return{
       list:[
         {name:require('../assets/imgs/01.jpg')},
         {name:require('../assets/imgs/02.jpg')},
         {name:require('../assets/imgs/03.jpg')},
         {name:require('../assets/imgs/04.jpg')},
         {name:require('../assets/imgs/05.jpg')},
         {name:require('../assets/imgs/06.jpg')},
         {name:require('../assets/imgs/07.jpg')},
         {name:require('../assets/imgs/08.jpg')},
         {name:require('../assets/imgs/09.jpg')},
         {name:require('../assets/imgs/010.jpg')},
       ]
     }
  },

2）v-lazy-container

<div v-lazy-container="{ selector: 'img',error: '../img/404nofind.3b1631e5.jpg', loading: 'loading.1b74fda3.png' }">
  <img data-src="../img/01.69e840f9.jpg" class="imgs">//data-src里面的地址是真实的地址，就是build之后在dist文件夹中的img里面的地址
  <img data-src="../img/02.34ef1dfb.jpg" class="imgs">
  <img data-src="../img/03.16b6bc13.jpg" class="imgs">  
    <img data-src="../img/04.cdbc3207.jpg" class="imgs">
  <img data-src="../img/05.a4e25273.jpg" class="imgs">
  <img data-src="../img/06.3183ae03.jpg" class="imgs">  
    <img data-src="../img/07.c0057596.jpg" class="imgs">
  <img data-src="../img/08.affc19be.jpg" class="imgs">
  <img data-src="../img/09.5c1d89c0.jpg" class="imgs">  
</div>

四、如果在使用中报错如下图所示

则是因为版本问题，可安装低版本的 vue-lazyload 来解决该问题：

# 先写在原有的安装
npm uninstall vue-lazyload --save
 
# 再安装低版本的
npm install vue-lazyload@1.3.3 --save

以上就是vue通过vue-lazyload实现图片懒加载的代码详解的详细内容，更多关于vue vue-lazyload图片懒加载的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

nuxt 实现在其它js文件中使用store的方式
这篇文章主要介绍了nuxt 实现在其它js文件中使用store的方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vue通过WebSocket建立长连接的实现代码
这篇文章主要介绍了Vue通过WebSocket建立长连接的实现代码，文中给出了问题及解决方案,需要的朋友可以参考下
2019-11-11
详解vue+axios给开发环境和生产环境配置不同的接口地址
这篇文章主要介绍了详解vue+axios给开发环境和生产环境配置不同的接口地址，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
vue实现日历备忘录功能
这篇文章主要为大家详细介绍了vue实现日历备忘录功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-06-06
vue中defineProperty和Proxy的区别详解
这篇文章主要介绍了vue中defineProperty和Proxy的区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
vue-cli设置publicPath小记
这篇文章主要介绍了vue-cli设置publicPath小记，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
Vuejs第六篇之Vuejs与form元素实例解析
本文通过实例给大家详细介绍了Vuejs与form元素的相关知识，非常不错，具有参考借鉴价值,需要的朋友可以参考下
2016-09-09
Vue Echarts实现带滚动效果的柱形图
这篇文章主要为大家详细介绍了Vue Echarts实现带滚动效果的柱形图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue页面渲染数组中数据文案后添加逗号最后不加
这篇文章主要为大家介绍了vue页面渲染数组中数据文案后添加逗号最后不加逗号示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
vue自定义指令实现元素滑动移动端适配及边界处理
这篇文章主要为大家介绍了vue自定义指令实现元素滑动移动端适配及边界处理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09