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

怆然忧遂

一、安装vue-lazyload

1）vue中安装：

1. npm install vue-lazyload --save-dev

复制代码

2）vue-cli中安装：

1. npm install vue-lazyload -D

复制代码

3）在HTML中安装：

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

复制代码

二、在main.js中进行引用

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

复制代码

一些配置的参数

三、在需要的组件中使用

1）v-lazy

1. <ul>
   
2.   <li v-for="(img,a) in list" :key=a>
   
3.     <img v-lazy="img.name" class="imgs">
   
4.   </li>
   
5. </ul>
   
6. 
   
7.   data(){
   
8.      return{
   
9.        list:[
   
10.          {name:require('../assets/imgs/01.jpg')},
    
11.          {name:require('../assets/imgs/02.jpg')},
    
12.          {name:require('../assets/imgs/03.jpg')},
    
13.          {name:require('../assets/imgs/04.jpg')},
    
14.          {name:require('../assets/imgs/05.jpg')},
    
15.          {name:require('../assets/imgs/06.jpg')},
    
16.          {name:require('../assets/imgs/07.jpg')},
    
17.          {name:require('../assets/imgs/08.jpg')},
    
18.          {name:require('../assets/imgs/09.jpg')},
    
19.          {name:require('../assets/imgs/010.jpg')},
    
20.        ]
    
21.      }
    
22.   },

复制代码

2）v-lazy-container

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

复制代码

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

则是因为版本问题， 可安装低版本的

1. vue-lazyload

复制代码

来解决该问题：

1. # 先写在原有的安装
   
2. npm uninstall vue-lazyload --save
   
3. 
   
4. # 再安装低版本的
   
5. npm install vue-lazyload@1.3.3 --save

复制代码

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

来源:https://www.jb51.net/javascript/316196emq.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！