首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue图片懒加载

vue图片懒加载的两种方法详解

2023-07-24 08:46:48 作者：一花一world

懒加载是一种网页优化技术，也被称为延迟加载，它的主要目的是在网页加载时，只加载当前可见区域内的内容，而延迟加载其他不可见区域的内容，从而提高网页的加载速度和性能，这篇文章主要介绍了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则更加灵活，可以实现更多自定义的懒加载效果。根据项目需求和个人喜好，你可以选择合适的方法来实现图片懒加载。

到此这篇关于vue图片懒加载的两种方法的文章就介绍到这了,更多相关vue图片懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！