JS图片懒加载库VueLazyLoad详解

什么是图片懒加载

图片懒加载是一种技术手段，用于减少页面加载时的请求次数。它将一些图片的资源延迟加载，直到用户需要访问它们的时候才进行加载，从而提高页面的加载速度。

VueLazyLoad介绍

VueLazyLoad是一个基于Vue.js的图片懒加载库。它能够处理负责的图片加载，让网页的加载速度更快，用户体验更好。

VueLazyLoad支持Vue.js的任何版本，并且可以通过npm进行安装。它提供很多自定义选项，使其适合任何需要使用图片懒加载的网站。

使用VueLazyLoad

安装

在使用VueLazyLoad之前，我们需要先进行安装。我们可以通过Yarn或者npm进行安装：

# 通过Yarn进行安装
yarn add vue-lazyload

# 通过npm进行安装
npm install vue-lazyload

引入并配置

在使用VueLazyLoad之前，我们需要先引入并配置它。我们可以将其放置在main.js文件中，以便全局使用。

import VueLazyLoad from 'vue-lazyload'

Vue.use(VueLazyLoad, {
  preLoad: 1.3,
  error: '/images/error.png',
  loading: '/images/loading.gif',
  attempt: 1
})

在引入VueLazyLoad之后，我们需要配置一些选项。其中，preLoad表示在图片距离实际触发加载的距离，值越大，越早加载；error表示加载失败时显示的图片；loading表示加载时显示的图片；attempt表示尝试加载的次数。

在组件中使用

在配置完VueLazyLoad之后，我们可以在组件中使用它。使用VueLazyLoad的方法非常简单，我们只需要为图片绑定一个v-lazy指令即可，例如：

<img v-lazy="imageUrl" alt="image description">

其中，imageUrl为图片地址。

示例说明

示例1

我们来看一个使用VueLazyLoad实现图片懒加载的例子：

<template>
  <div>
    <img
      v-for="(item, index) in imageList"
      :key="index"
      v-lazy="item.url"
      :alt="item.title"
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageList: [
        {
          url: require('@/assets/img/img1.jpg'),
          title: '图片1'
        },
        {
          url: require('@/assets/img/img2.jpg'),
          title: '图片2'
        },
        {
          url: require('@/assets/img/img3.jpg'),
          title: '图片3'
        }
      ]
    }
  }
}
</script>

在这个示例中，我们首先需要在组件中引入VueLazyLoad，并且配置一些选项。然后在模板中使用v-lazy指令，将需要懒加载的图片地址绑定到该指令上。最后，我们可以通过v-for指令循环遍历图片列表，实现批量懒加载。

示例2

我们再看一个使用VueLazyLoad实现滚动懒加载的例子：

<template>
  <div>
    <div
      v-for="(item, index) in list"
      :key="index"
      class="item"
      :data-image="item.image"
      :style="{ backgroundImage: `url(${item.bgImage})` }"
    >
      <h4>{{ item.title }}</h4>
      <p>{{ item.description }}</p>
    </div>
  </div>
</template>

<script>
import VueLazyLoad from 'vue-lazyload'

export default {
  data() {
    return {
      list: [],
      page: 1,
      loading: false
    }
  },
  mounted() {
    this.loadList()
    window.addEventListener('scroll', this.onScroll);
  },
  destroyed() {
    window.removeEventListener('scroll', this.onScroll);
  },
  methods: {
    onScroll() {
      let vh = window.innerHeight || document.documentElement.clientHeight
      let scrollTop = document.documentElement.scrollTop
      let eleList = Array.prototype.slice.call(document.querySelectorAll('.item'))
      eleList.forEach(item => {
        let elOffsetTop = item.offsetTop
        let elHeight = item.offsetHeight
        if (scrollTop + vh > elOffsetTop && scrollTop < elOffsetTop + elHeight) {
          this.loadImage(item)
        }
      })
    },
    loadImage(ele) {
      let image = ele.getAttribute('data-image')
      ele.style.backgroundImage = `url(${image})`
      ele.removeAttribute('data-image')
    },
    loadList() {
      // 模拟异步加载数据
      this.loading = true
      setTimeout(() => {
        let start = (this.page - 1) * 5
        let end = this.page * 5
        for (let i = start; i < end; i++) {
          this.list.push({
            image: require('@/assets/img/img1.jpg'),
            bgImage: require('@/assets/img/img3.jpg'),
            title: `标题${i}`,
            description: `内容${i}`
          })
        }
        this.loading = false
        this.page++
      }, 1000)
    }
  }
}
</script>

在这个示例中，我们首先需要在组件中引入VueLazyLoad，并且在mounted钩子函数中处理滚动事件。然后我们需要在模板中预设每个需要懒加载的元素的初始图片，然后将真实的图片地址存储在data-image属性中，使用背景图片的方式展示我们的元素。最后，在滚动事件中判断元素是否进入视窗，如果是则加载真实的图片，并且将data-image属性删除，以确保图片只被加载一次。同时，为了模拟实际场景，我们在loadList函数中添加一个setTimeout函数，用于模拟异步加载数据的过程。