轻量级 Vue 图片懒加载组件Vue-Lazyload

今天给大家分享一个超极致的Vue.js图片延迟加载组件VueLazyload。

vue-lazyload 基于Vue封装的图片懒加载组件。github ★ 高达6.4K+，完美支持主流浏览器，流畅的加载速度和减轻服务器负载。

安装

$ npm i vue-lazyload -S

引入

# 在main.js中引入
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

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

使用组件

<template>
  <div ref="container">
    <!-- 基本用法 -->
    <img v-lazy="imgUrl"/>
    <div v-lazy:background-image="imgUrl"></div>
    
    <!-- 加载错误/加载中提示 -->
    <img v-lazy="imgObj"/>
    <div v-lazy:background-image="imgObj"></div>
    <!-- 或者 -->
    <div v-lazy-container="{ selector: 'img', error: 'assets/error.png', loading: 'assets/loading.png' }">
      <img data-src="assets/img1.jpg">
      <img data-src="assets/img2.jpg">
      <img data-src="assets/img3.jpg">  
    </div>
    
    <!-- 可滚动元素 -->
    <img v-lazy.container ="imgUrl"/>
    <div v-lazy:background-image.container="img"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgUrl: 'assets/logo.png',
      imgObj: {
        src: 'assets/logo.png',
        error: 'assets/error.png',
        loading: 'assets/loading.png'
      },
    }
  }
}
</script>

组件参数

提供精美的演示示例

附上demo示例及仓库地址

# 演示地址
http://hilongjw.github.io/vue-lazyload/

# 仓库地址
https://github.com/hilongjw/vue-lazyload

好了，就介绍到这里。小伙伴们如果其他的Vue懒加载组件，欢迎一起交流讨论哈！