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

待我称王封你为后i 2022-08-28 06:39 315阅读 0赞

# [演示][Link 1] #

![322f52b362684db09fd3b1c3599d114b.gif][]

# 安装插件 #

npm install vue-lazyload --save-dev
    
    // or
    <script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>

# 使用 #

> 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//尝试加载次数 | 可选
    })

>  vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy

## 案例 ##

<template>
        <div class="loadingImg">
            <img v-lazy="img"alt="" v-for="img in list" ondragstart="return false">
            <div class="gototop" @click="BackToTop">
                <a>回到<br>顶部</a>
            </div>
        </div>
    </template>
    <script>
        export default{
            data(){
                return{
                    list:[
                        "/static/img/2.jpg",
                        "/static/img/3.jpg",
                        "/static/img/4.jpg",
                        "/static/img/5.jpg",
                        "/static/img/6.jpg",
                        "/static/img/7.jpg",
                        "/static/img/8.jpg",
                        "/static/img/9.jpg",
                        "/static/img/10.jpg",
                        "/static/img/11.jpg"
                    ]
                }
            },
            methods:{
                BackToTop(){
                    $('html,body').animate({ scrollTop: 0 }, 700);  
                },
                handleScroll () {
                    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                    console.log(scrollTop)
                    if(scrollTop >100){
                        $(".gototop").fadeIn(500);
                    }
                },      
    
            },
            mounted(){
               window.addEventListener('scroll', this.handleScroll)
                $(".gototop").hide();
            },
            created(){
                   
            }
        }
    </script>
    <style scoped>
    img[lazy=loading]{
        
    }
    img[lazy=loaded]{
      animation:fade 0.5s;
    }
    img{
      transition:all 0.5s;
      display: block;
      width: 400px;
      margin: 0 auto;
    }
    
    @keyframes fade {
      0%{
        opacity: 0;
      }
      100%{
        opacity: 1;
      }
    }
    .gototop{
        width: 40px;
        height: 40px;
        border-radius: 5px;
        border: 1px solid #ccc;
        background: #f2f2f5;
        position: fixed;
        right: 30px;
        bottom: 50px;
        font-size: 12px;
        cursor: pointer;
    }
    .gototop a{
        color: #666;
        line-height: 20px;
        display: inline-block;
    }
    </style>

# #

# **[扩展][Link 2]** #

<table> 
 <thead> 
  <tr> 
   <th>key</th> 
   <th>description</th> 
   <th>default</th> 
   <th>options</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>preLoad</code></td> 
   <td>proportion of pre-loading height（预加载高度比例）</td> 
   <td><code>1.3</code></td> 
   <td><code>Number</code></td> 
  </tr> 
  <tr> 
   <td><code>error</code></td> 
   <td>src of the image upon load fail（图片路径错误时加载图片）</td> 
   <td><code>'data-src'</code></td> 
   <td><code>String</code></td> 
  </tr> 
  <tr> 
   <td><code>loading</code></td> 
   <td>src of the image while loading（预加载图片）</td> 
   <td><code>'data-src'</code></td> 
   <td><code>String</code></td> 
  </tr> 
  <tr> 
   <td><code>attempt</code></td> 
   <td>attempts count（尝试加载图片数量）</td> 
   <td><code>3</code></td> 
   <td><code>Number</code></td> 
  </tr> 
  <tr> 
   <td><code>listenEvents</code></td> 
   <td> <p>events that you want vue listen for</p> <p>（想要监听的vue事件）</p> <p>默认['scroll']可以省略，</p> <p>当插件跟页面中的动画或过渡等事件有冲突是，</p> <p>可以尝试其他选项</p> </td> 
   <td> <p><code>['scroll'（默认）,</code></p> <p><code>'wheel',</code></p> <p><code>'mousewheel',</code></p> <p><code>'resize',</code></p> <p><code>'animationend',</code></p> <p><code>'transitionend',</code></p> <p><code>'touchmove']</code></p> </td> 
   <td><a href="https://www.npmjs.com/package/vue-lazyload#desired-listen-events" title="Desired Listen Events" rel="nofollow">Desired Listen Events</a></td> 
  </tr> 
  <tr> 
   <td><code>adapter</code></td> 
   <td> <p>dynamically modify the attribute of element</p> <p>（动态修改元素属性）</p> </td> 
   <td><code>{ }</code></td> 
   <td><a href="https://www.npmjs.com/package/vue-lazyload#element-adapter" title="Element Adapter" rel="nofollow">Element Adapter</a></td> 
  </tr> 
  <tr> 
   <td><code>filter</code></td> 
   <td>the image's listener filter（动态修改图片地址路径）</td> 
   <td><code>{ }</code></td> 
   <td><a href="https://www.npmjs.com/package/vue-lazyload#image-listener-filter" title="Image listener filter" rel="nofollow">Image listener filter</a></td> 
  </tr> 
  <tr> 
   <td><code>lazyComponent</code></td> 
   <td>lazyload component</td> 
   <td><code>false</code></td> 
   <td><a href="https://www.npmjs.com/package/vue-lazyload#lazy-component" title="Lazy Component" rel="nofollow">Lazy Component</a></td> 
  </tr> 
  <tr> 
   <td><code>dispatchEvent</code></td> 
   <td>trigger the dom event</td> 
   <td><code>false</code></td> 
   <td><code>Boolean</code></td> 
  </tr> 
  <tr> 
   <td><code>throttleWait</code></td> 
   <td>throttle wait</td> 
   <td><code>200</code></td> 
   <td><code>Number</code></td> 
  </tr> 
  <tr> 
   <td><code>observer</code></td> 
   <td>use IntersectionObserver</td> 
   <td><code>false</code></td> 
   <td><code>Boolean</code></td> 
  </tr> 
  <tr> 
   <td><code>observerOptions</code></td> 
   <td>IntersectionObserver options</td> 
   <td>{ rootMargin: '0px', threshold: 0.1 }</td> 
   <td><a href="https://www.npmjs.com/package/vue-lazyload#intersectionobserver" title="IntersectionObserver" rel="nofollow">IntersectionObserver</a></td> 
  </tr> 
 </tbody> 
</table>

[Link 1]: http://hilongjw.github.io/vue-lazyload/
[322f52b362684db09fd3b1c3599d114b.gif]: /images/20220828/f49ab1dd574440c1af6b33593a20e12f.png
[Link 2]: https://www.npmjs.com/package/vue-lazyload#lazy-component