vue图片懒加载的两种方法

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

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

1、场景

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

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

2、缺点

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

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

3、优点

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

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

具体代码：

a.首先安装vue-lazyload库：npm install vue-lazyload

b.在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 // 加载错误后的重试次数
});

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

<template>
  <img v-lazy="imageSrc" alt="Lazy loaded image">
</template>
<script>
export default {
  data() {
    return {
      imageSrc: 'path/to/image.jpg' // 图片的路径
    };
  }
};
</script>

二、使用Intersection Observer API

1、场景

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

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

2、缺点

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

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

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

3、优点

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

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

代码：

在组件中定义一个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会触发回调函数，然后加载图片。