likes
comments
collection
share

Vue 图片懒加载实战：多种实现方法详解

作者站长头像
站长
· 阅读数 36

图片懒加载是前端开发中一项重要的性能优化策略，它能够明显缩短页面加载时间，提升用户的浏览体验。在本文中，我们将深入探讨在Vue开发时候如何实现图片懒加载，同时探讨多种实现途径。这些方法包括自定义指令、利用第三方库、以及基于滚动事件的懒加载等等。无论你的项目有何特定需求，都能在这些方法中找到适合你的解决方案。

为什么需要图片懒加载？

首先，让我们回顾一下为什么需要图片懒加载。在没有图片懒加载的情况下，页面加载时会同时请求所有图片，这可能导致以下问题：

  1. 延迟页面加载时间： 如果页面包含大量的图片，所有这些图片都在页面加载时同时请求，会导致页面加载时间显著增加，用户需要等待更长的时间才能看到内容。

  2. 浪费带宽： 加载不在可视区域的图片是一种带宽浪费。用户可能永远不会看到这些图片，但它们仍然会被下载，这浪费了用户的带宽和服务器资源。

  3. 降低用户体验： 页面加载时间过长会降低用户的体验。用户希望立即看到内容，而不是等待图片加载完成。

图片懒加载的核心思想是只有当图片出现在用户可视区域时才加载它们，从而解决了上述问题。

使用 Vue.js 实现图片懒加载

现在，让我们一起来探讨多种使用 Vue.js 实现图片懒加载的方法。

方法 1: 自定义指令

我们首先介绍的方法是使用自定义指令。自定义指令允许我们将懒加载逻辑封装成可重用的指令，然后在需要懒加载的图片元素上使用这个指令。

<template>
  <div>
    <img v-for="(image, index) in images" :src="image" v-lazyload />
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'image1.jpg',
        'image2.jpg',
        'image3.jpg',
        // 添加更多图片链接
      ],
    };
  },
};
</script>

在上述代码中，我们为每张图片元素添加了 v-lazyload 指令。接下来，我们需要创建这个自定义指令并添加懒加载的逻辑。

<script>
export default {
  directives: {
    lazyload: {
      inserted(el) {
        // 添加懒加载逻辑
      },
    },
  },
};
</script>

在 inserted 钩子中，我们可以使用 Intersection Observer API 监测图片是否进入了可视区域，一旦图片进入可视区域，我们可以加载它。

这是一个基本的自定义指令的骨架，你可以根据项目需求进一步定制懒加载逻辑。

方法 2: 使用第三方库

Vue.js 生态系统中有一些强大的第三方库，可以帮助你快速实现图片懒加载。其中之一是 vue-lazyload。

首先，安装 vue-lazyload：

npm install vue-lazyload

然后，在你的 Vue.js 应用中引入它并配置：

<script>
import VueLazyload from 'vue-lazyload';

export default {
  directives: {
    lazyload: VueLazyload, // 使用vue-lazyload指令
  },
};
</script>

现在，你可以在模板中使用 v-lazy 指令来实现图片懒加载：

<template>
  <div>
    <img v-for="(image, index) in images" :src="image" v-lazy="image" />
  </div>
</template>

vue-lazyload 提供了丰富的配置选项，包括预加载、错误占位符、加载占位符等等，你可以根据项目需求进行自定义。

方法 3: 基于滚动事件的懒加载

在某些情况下，你可能不想使用第三方库，而是倾向于编写自己的图片懒加载逻辑。这可以通过基于滚动事件来实现。

首先，在你的 Vue 组件中，为图片元素绑定监听滚动事件的方法：

<template>
  <div>
    <img v-for="(image, index) in images" :src="image" ref="lazyImages" @load="onImageLoad(index)" />
  </div>
</template>

在 @load 事件中，我们触发了一个方法 onImageLoad(index)。

然后，在组件的 methods 部分实现 onImageLoad 方法来检测图片是否进入可视区域：

<script>
export default {
  methods: {
    onImageLoad(index) {
      const lazyImages = this.$refs.lazyImages;
      const img = lazyImages[index];
      const rect = img.getBoundingClientRect();

      if (rect.top < window.innerHeight && rect.bottom >= 0 && !img.src) {
        img.src = img.dataset.src;
      }
    },
  },
};
</script>

这段代码检查每个图片元素是否进入可视区域，并且仅在图片未加载时才设置 src 属性。确保在图片元素上设置了 data-src 属性。

这是一种基本的滚动事件懒加载方法，你可以根据需要进一步优化和扩展。

方法 4: 使用移动端的 lazyload 属性

在移动端开发中，浏览器通常支

持 lazyload 属性，这是一个原生的懒加载属性。你只需在 img 标签上添加 loading="lazy" 属性，浏览器会自动处理图片的懒加载。

<template>
  <div>
    <img v-for="(image, index) in images" :src="image" loading="lazy" />
  </div>
</template>

这种方法非常简单，适用于移动端应用开发，因为它充分利用了浏览器的原生支持。

方法 5: 使用懒加载的 CSS 类

在某些情况下，你可以使用 CSS 类来实现图片懒加载。首先，为所有的图片元素添加一个自定义的 CSS 类，例如 lazy-load。

<template>
  <div>
    <img v-for="(image, index) in images" :src="image" class="lazy-load" />
  </div>
</template>

然后，使用 JavaScript 来检测滚动事件，当图片进入可视区域时，将图片元素的 src 属性设置为图片的实际 URL。

<script>
export default {
  mounted() {
    const lazyImages = document.querySelectorAll('.lazy-load');

    function lazyLoad() {
      lazyImages.forEach(img => {
        const rect = img.getBoundingClientRect();
        if (rect.top < window.innerHeight && rect.bottom >= 0 && !img.src) {
          img.src = img.dataset.src;
        }
      });
    }

    window.addEventListener('scroll', lazyLoad);
  },
};
</script>

这种方法适用于一些简单的项目，但不如 Intersection Observer 那么高效和可维护。

方法 6: 使用服务端渲染 (SSR) 或静态生成 (SSG)

最后，如果你的应用使用了服务端渲染 (SSR) 或静态生成 (SSG) 技术，那么图片懒加载通常是不必要的。因为在服务器端渲染阶段或构建阶段，你可以在页面加载时直接将图片渲染到 HTML 中，无需进行懒加载。

这是因为在 SSR 或 SSG 中，你可以在构建时或服务器端获取图片的信息，并将图片 URL 直接嵌入到生成的 HTML 中，从而减少页面加载时的请求。这种方法不仅提高了性能，还可以更好地支持搜索引擎优化 (SEO)。

总结

图片懒加载是一个重要的性能优化技巧，可以显著减少页面加载时间，提高用户体验。在选择图片懒加载的方法时，要考虑项目需求、移动端或桌面端、浏览器支持等因素，并选择最适合你的方法。无论你选择哪种方法，都可以通过懒加载来改善你的项目性能。

转载自:https://juejin.cn/post/7271542727350616099
评论
请登录