vue图片懒加载的两种方法

什么是懒加载？

懒加载（Lazy Loading）是一种网页优化技术，也被称为延迟加载。它的主要目的是在网页加载时，只加载当前可见区域内的内容，而延迟加载其他不可见区域的内容，从而提高网页的加载速度和性能。

在图片懒加载中，懒加载的定义是指在网页加载时，只加载可见区域内的图片，而延迟加载其他不可见区域的图片。当用户滚动页面时，进入可见区域的图片会被加载，而离开可见区域的图片则会被卸载，从而减少了页面的加载时间和带宽消耗。

懒加载的实现方式可以通过监听滚动事件，判断图片是否进入可见区域，然后动态加载图片。另外，也可以使用浏览器提供的Intersection Observer API来实现图片懒加载，它可以更加灵活地监听元素是否进入视窗。

懒加载在提高网页性能方面具有重要的作用，特别是对于包含大量图片的页面，可以显著减少页面的加载时间，并提升用户体验。同时，懒加载也可以减少带宽的消耗，节省服务器资源。因此，懒加载已经成为了现代网页开发中常用的优化技术之一。

下面介绍常用两种实现方法

使用第三方库vue-lazyload的场景和优缺点：

场景：

如果你希望快速实现图片懒加载功能，而不想自己编写复杂的逻辑和处理细节，可以选择使用vue-lazyload。

• 如果你希望在多个组件中使用图片懒加载，并且希望有统一的配置和管理，可以使用vue-lazyload来统一管理图片的加载。

优点：

简单易用，只需要在main.js中配置一次，然后在组件中使用v-lazy指令即可实现图片懒加载。

• 可以配置预加载的高度比例、加载失败时显示的图片、加载中显示的图片等，具有较好的可定制性。
• 支持图片加载失败后的重试功能。

缺点：

需要安装和引入第三方库，增加了项目的依赖和体积。

• 对于一些复杂的懒加载需求，可能无法满足。

使用Intersection Observer API的场景和优缺点：

场景：

如果你希望有更多的自定义和灵活性，可以使用Intersection Observer API来实现图片懒加载。

• 如果你希望实现一些特殊的懒加载效果，比如图片从不同方向滑入、图片加载时带有动画效果等，可以使用Intersection Observer API来实现。

优点：

可以实现更多自定义的懒加载效果，比如图片的动画效果、滑入方向等。

• 对于一些复杂的懒加载需求，可以更灵活地处理。

缺点：

需要编写更多的代码来实现懒加载逻辑，相对于使用第三方库来说，实现起来可能更复杂一些。

• 兼容性问题，Intersection Observer API在一些旧版本的浏览器中不被支持，需要使用polyfill来解决。

综上所述，使用第三方库vue-lazyload适合简单的图片懒加载需求，可以快速实现并且具有较好的可定制性；而使用Intersection Observer API适合对懒加载效果有更高要求、需要自定义和灵活处理的情况。根据项目需求和个人喜好，选择合适的方法来实现图片懒加载。

具体代码实现

方法一：使用第三方库vue-lazyload

1. 首先安装vue-lazyload库：

npm install vue-lazyload

2. 在main.js中引入vue-lazyload并配置：

import Vue from 'vue';
import VueLazyload from 'vue-lazyload';

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载的高度比例
  error: 'path/to/error.png', // 图片加载失败时显示的图片
  loading: 'path/to/loading.gif', // 图片加载中显示的图片
  attempt: 1 // 加载错误后的重试次数
});

3. 在组件中使用v-lazy指令来懒加载图片：

<template>
  <img v-lazy="imageSrc" alt="Lazy loaded image">
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'path/to/image.jpg' // 图片的路径
    };
  }
};
</script>

这样，当图片进入可视区域时，vue-lazyload会自动加载图片。

方法二：使用Intersection Observer API

1. 在组件中定义一个Intersection Observer实例：

<template>
  <div>
    <img ref="image" :src="loadingSrc" alt="Lazy loaded image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      loadingSrc: 'path/to/loading.gif', // 图片加载中显示的图片
      imageSrc: 'path/to/image.jpg', // 图片的路径
    };
  },
  mounted() {
    const options = {
      root: null, // 默认为视窗
      rootMargin: '0px',
      threshold: 0.1 // 图片进入视窗的百分比
    };

    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          this.loadImage();
          observer.unobserve(entry.target); // 停止监听
        }
      });
    }, options);

    observer.observe(this.$refs.image);
  },
  methods: {
    loadImage() {
      const image = new Image();
      image.src = this.imageSrc;
      image.onload = () => {
        this.$refs.image.src = this.imageSrc;
      };
    }
  }
};
</script>

这样，当图片进入视窗的10%时，Intersection Observer会触发回调函数，然后加载图片。

以上是两种常用的Vue图片懒加载的方法。使用第三方库vue-lazyload可以更方便地实现图片懒加载，而使用Intersection Observer API则更加灵活，可以实现更多自定义的懒加载效果。根据项目需求和个人喜好，你可以选择合适的方法来实现图片懒加载。