一、需求

对某个大列表的图片需要进行懒加载,直接使用了 vue 的第三方插件 vue-lazyload,(这好像是用的最多的插件,也的确很好用)

vue-lazyload github地址:

在线demo地址:

二、基本使用

安装:

yarn add vue-lazyload

引入

import VueLazyload from 'vue-lazyload'

Vue.use

vue 在 use 的时候,存在配置项目,主要配置如下:

  • preLoad: 图片加载的高度范围比例,默认为1.3,数字越大,预加载图片越多,数字越小,预加载图片数量越少
  • error: 加载错误的代替图片(使用 require 直接引入 src 中的图片)
  • loading: 加载时的 loading 图片(使用 require 直接引入 src 中的图片)
  • attempt: 尝试加载的次数 默认为3
const lazyloadOptions = {
    preLoad: 1.3,
    error: require("@/assets/images/error.png"),
    loading: require("@/assets/images/loading.gif"),
    attempt: 1
};
Vue.use(VueLazyload,options);

在 template 中使用

如果是写在 template 的模板代码,可以直接使用 v-lazy 指定图片地址,如:

<img v-lazy="item.imgurl" :alt="item.creator.name" width="50" height="50">

如果是在普通的 html 代码中使用,则需要指定一个 v-lazy-container 的属性,并且指定选择器是什么:

(用的比较少)

<div v-lazy-container="{ selector: 'img' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>

三、其他的一些经常用的配置项

  • listenEvents :希望 vue 监听的事件,默认值:['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']
  • filter:图片类型的过滤,可以做到动态的修改图片的 src
  • lazyComponent:是否使用懒加载组件

使用内置的懒加载组件,能够做更多额外的工作,比如:

<lazy-component @show="handler">
  <img class="mini-cover" :src="img.src" width="100%" height="400">
</lazy-component>
<script>
  {
    ...
    methods: {
      handler (component) {
        console.log('this component is showing')
      }
    }

  }
</script>
  • observer:是否使用 IntersectionObserver

这个API兼容性非常差现在,可以参考: