element ui el-carousel 滚动图 vue 基于vue-lazyload图片懒加载、延迟加载解决方案

亦凉 2022-04-18 01:15 866阅读 0赞

vue-lazyload插件github地址：[https://github.com/hilongjw/vue-lazyload\#requirements][https_github.com_hilongjw_vue-lazyload_requirements]

效果是默认不加载图片，先用一个占位符图来代替，等使用图片的时再进行加载（比如滚动到图片的时候），如果真正的图片请求出错了，用默认的出错图片来进行占位

### 一、安装插件 ###

$ npm install vue-lazyload --save

### 二、配置 ###

//main.js
    import VueLazyload from 'vue-lazyload'
    
    Vue.use(VueLazyload, {
      preLoad: 1.3,
      attempt: 1  ,   // 加载图片数量
       listenEvents: ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']
    })

具体配置api

<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>events that you want vue listen for</td> 
   <td><code>['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']</code></td> 
   <td><a href="https://github.com/hilongjw/vue-lazyload#desired-listen-events" rel="nofollow">Desired Listen Events</a></td> 
  </tr> 
  <tr> 
   <td><code>adapter</code></td> 
   <td>dynamically modify the attribute of element</td> 
   <td><code>{ }</code></td> 
   <td><a href="https://github.com/hilongjw/vue-lazyload#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://github.com/hilongjw/vue-lazyload#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://github.com/hilongjw/vue-lazyload#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://github.com/hilongjw/vue-lazyload#intersectionobserver" rel="nofollow">IntersectionObserver</a></td> 
  </tr> 
  <tr> 
   <td><code>silent</code></td> 
   <td>do not print debug info</td> 
   <td><code>true</code></td> 
   <td><code>Boolean</code></td> 
  </tr> 
 </tbody> 
</table>

### 三、html/js ###

data() {
        return {
          bannerHeight: 700,
          screenWidth: 1920,
          list: [
            "http://47.107.140.8/image/home/banner1.jpg",
            "http://47.107.140.8/image/home/banner2.jpg",
            "http://47.107.140.8/image/home/banner3.jpg",
            "http://47.107.140.8/image/home/banner4.jpg"
          ]
        };
      },

### 四、事件监听 ###

可以通过传递数组来配置想要使用vue - lazyload的事件监听器的名字。

Vue.use(VueLazyload, {
      preLoad: 1.3,
      error: 'dist/error.png',
      loading: 'dist/loading.gif',
      attempt: 1,
      // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
      listenEvents: [ 'scroll' ]
    })

[https_github.com_hilongjw_vue-lazyload_requirements]: https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fhilongjw%2Fvue-lazyload%23requirements