vue-lazyload实现图片懒加载(个人笔记)

官网地址：https://www.npmjs.com/package/vue-lazyload
借鉴地址：https://segmentfault.com/a/1190000014928116

安装

npm i vue-lazyload -S

引入

// main.js
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

配置参数

//static目录下的图片引用
Vue.use(VueLazyload,{
    error:'/static/images/logo.png',//图片加载失败时候显示的图片
    loading:'/static/images/loading.gif'//图片还未加载完成时候的loading图片
})
//assets目录下的图片引用, 需要加require引入图片
Vue.use(VueLazyload,{
    error:require('./assets/images/logo.png'),
    loading:require('./assets/images/loading.gif')
})

基本用法

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" > <!-- v-lazy替换src, 表示加载成功的图片地址-->
  </li>
</ul>
// 背景图片用法
<img v-for="img in imgs" v-lazy:background-image="img">

使用v-lazy-container

<div v-lazy-container="{ selector: 'img' }"> <!--表示在selector 选择器里面的图片都懒加载-->
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>
<!--显示错误和加载中图片的两种方式-->
<!--第一种方式，针对所有图片-->
<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>
<!--第二种方式，针对单一图片-->
<div v-lazy-container="{ selector: 'img' }">
  <img data-src="//domain.com/img1.jpg" data-error="xxx.jpg">
  <img data-src="//domain.com/img2.jpg" data-loading="xxx.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>

使用lazy-component组件

实现被 lazy-component 标签包含的元素延迟渲染。

// main.js
Vue.use(VueLazyload, {
  lazyComponent: true
});

<lazy-component @show="handler">
  <img class="mini-cover" :src="img.src" width="100%" height="400">
</lazy-component>

对象方式

data () {
    return {
      imgObj: {
        src: 'http://xx.com/logo.png',
        error: 'http://xx.com/error.png',
        loading: 'http://xx.com/loading-spin.svg'
      },
      imgUrl: 'http://xx.com/logo.png' // String
    }
  }

<div ref="container">
   <img v-lazy="imgUrl"/>
   <div v-lazy:background-image="imgUrl"></div>
 
   <!-- with customer error and loading -->
   <img v-lazy="imgObj"/>
   <div v-lazy:background-image="imgObj"></div>
</div>

css方式

除了src 形式外，我们还可以借用 css 来实现加载状态。
该插件会在图片元素上加上当前的加载状态：分别是 loading、loaded、error。

<img src="imgUrl" lazy="loading">
<img src="imgUrl" lazy="loaded">
<img src="imgUrl" lazy="error">
此时使用元素选择器，来给每一个状态添加相应的样式

<style>
  img[lazy=loading] { }
  img[lazy=error] { }
  img[lazy=loaded] { }
</style>

listenEvents

默认配置的监听事件：['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']
为了提高页面性能，我们可以指定当前页面懒加载监听的事件，如['scroll']