MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Vue项目中的图片懒加载技术

2024-04-132.3k 阅读

一、图片懒加载概述

在前端开发中，图片懒加载是一项极为重要的优化技术。随着网页内容的日益丰富，尤其是包含大量图片的页面，一次性加载所有图片会严重影响页面的加载性能和用户体验。想象一下，当用户打开一个页面，其中有几十张甚至上百张图片，这些图片都在页面加载时同时请求并渲染，页面可能会长时间处于加载状态，甚至导致卡顿。

图片懒加载的核心思想是，在页面加载时，只加载用户当前可视区域内的图片，当用户滚动页面，使得原本不可见的图片进入可视区域时，再加载这些图片。这样做有诸多好处：

  • 提升初始加载速度：减少页面首次加载时需要请求的资源数量，从而加快页面的呈现速度。用户能够更快看到页面主体内容，提升用户满意度。
  • 节省带宽：对于用户没有浏览到的图片，不会进行加载，这对于移动设备用户或网络带宽有限的用户来说，能够节省大量的流量。
  • 优化用户体验：避免了因一次性加载过多图片导致的页面卡顿，让页面滚动更加流畅。

二、Vue项目中实现图片懒加载的方式

2.1 使用原生JavaScript实现图片懒加载

在Vue项目中，我们可以借助原生JavaScript来实现图片懒加载。这主要涉及到IntersectionObserver API。IntersectionObserver 提供了一种异步观察目标元素与其祖先元素或视窗（viewport）交叉变化情况的方法。 以下是一个简单的示例代码：

<template>
  <div>
    <img v-for="(img, index) in images" :key="index" :data-src="img.src" alt="lazyload-img" class="lazyload-img">
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { src: 'image1.jpg' },
        { src: 'image2.jpg' },
        { src: 'image3.jpg' }
      ]
    };
  },
  mounted() {
    const lazyImages = document.querySelectorAll('.lazyload-img');
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          observer.unobserve(img);
        }
      });
    });
    lazyImages.forEach(image => {
      observer.observe(image);
    });
  }
};
</script>

<style scoped>
.lazyload-img {
  width: 100%;
  height: auto;
  display: block;
}
</style>

在上述代码中：

  • 首先，在模板中通过 v - for 指令遍历图片数据数组，并使用 data - src 属性来存储图片的真实src地址，避免图片一开始就加载。
  • 在 mounted 钩子函数中，获取所有具有 lazyload - img 类名的图片元素。
  • 创建一个 IntersectionObserver 实例，当观察的图片元素进入视口（entry.isIntersecting 为 true）时，将 data - src 的值赋给 src，从而触发图片加载，并停止对该图片的观察。

2.2 使用Vue - Lazyload插件

Vue - Lazyload是一个专门为Vue.js开发的图片懒加载插件，使用它可以更方便地在Vue项目中实现图片懒加载功能。

2.2.1 安装

通过npm安装Vue - Lazyload：

npm install vue - lazyload --save

2.2.2 全局配置

在Vue项目的入口文件（通常是 main.js）中引入并配置Vue - Lazyload：

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

Vue.use(VueLazyload, {
  // 配置选项
  preLoad: 1.3,
  error: 'error.jpg',
  loading: 'loading.gif',
  attempt: 3
});
  • preLoad：预加载比例，默认为1.3，表示在图片距离视口1.3倍的高度或宽度时开始加载。
  • error：图片加载失败时显示的图片路径。
  • loading：图片加载过程中显示的图片路径。
  • attempt：图片加载失败时的重试次数。

2.2.3 使用

在模板中使用非常简单：

<template>
  <div>
    <img v - lazy="image.src" alt="lazyload - img">
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: { src: 'image.jpg' }
    };
  }
};
</script>

这里使用 v - lazy 指令替代了原生的 src 属性，当图片进入视口时，Vue - Lazyload会自动将 v - lazy 绑定的值赋给 src，从而实现图片懒加载。

2.3 自定义指令实现图片懒加载

除了使用插件和原生JavaScript，我们还可以通过Vue的自定义指令来实现图片懒加载。自定义指令允许我们在Vue组件的模板中添加一些特殊的行为。

<template>
  <div>
    <img v - lazyload="image.src" alt="lazyload - img">
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: { src: 'image.jpg' }
    };
  },
  directives: {
    lazyload: {
      inserted: function (el, binding) {
        const observer = new IntersectionObserver((entries, observer) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              el.src = binding.value;
              observer.unobserve(el);
            }
          });
        });
        observer.observe(el);
      }
    }
  }
};
</script>

在上述代码中：

  • 定义了一个名为 lazyload 的自定义指令。
  • 在 inserted 钩子函数中，当指令所绑定的元素插入到DOM中时，创建一个 IntersectionObserver 实例，当元素进入视口时，将 binding.value（即图片的真实src地址）赋给 src，并停止观察。

三、图片懒加载的优化与注意事项

3.1 图片尺寸优化

在实现图片懒加载的同时，对图片尺寸进行优化同样重要。大尺寸的图片即使通过懒加载延迟加载，一旦加载也会占用较多的带宽和内存。可以使用图像编辑工具或在线工具对图片进行压缩，在不影响图片质量的前提下，减小图片文件的大小。同时，根据图片在页面中的显示尺寸，合理设置图片的原始尺寸，避免浏览器对图片进行不必要的缩放。例如，如果一个图片在页面中显示宽度为200px，高度为150px，那么在上传或处理图片时，将其原始尺寸设置为接近这个值，而不是一个非常大的尺寸。

3.2 处理加载失败

无论是使用原生JavaScript、Vue - Lazyload插件还是自定义指令实现图片懒加载，都需要考虑图片加载失败的情况。在Vue - Lazyload插件中，可以通过配置 error 选项来指定加载失败时显示的图片。对于原生JavaScript和自定义指令实现的方式，也可以在 IntersectionObserver 的回调函数中添加加载失败的处理逻辑。例如，可以给图片元素添加一个 error 事件监听器，当图片加载失败时，显示一个默认的提示图片或文本信息。

<template>
  <div>
    <img v - for="(img, index) in images" :key="index" :data - src="img.src" alt="lazyload - img" class="lazyload - img" @error="handleError(index)">
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { src: 'image1.jpg' },
        { src: 'image2.jpg' },
        { src: 'image3.jpg' }
      ]
    };
  },
  mounted() {
    const lazyImages = document.querySelectorAll('.lazyload - img');
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          observer.unobserve(img);
        }
      });
    });
    lazyImages.forEach(image => {
      observer.observe(image);
    });
  },
  methods: {
    handleError(index) {
      this.images[index].src = 'error.jpg';
    }
  }
};
</script>

在上述代码中，通过给图片元素添加 @error 事件监听器，当图片加载失败时，调用 handleError 方法，将该图片的 src 属性设置为 error.jpg，即显示加载失败的提示图片。

3.3 性能监测与优化

为了确保图片懒加载技术真正提升了页面性能，需要进行性能监测。可以使用浏览器的开发者工具，如Chrome DevTools中的Performance面板，来分析页面加载过程中图片的加载情况，包括加载时间、请求数量等。通过性能监测，可以发现潜在的性能问题，如某些图片加载过早或过晚，或者图片加载失败影响了整体性能等。根据监测结果，进一步优化图片懒加载的配置和实现方式。例如，如果发现某些图片在距离视口较远时就开始加载，可以适当调整Vue - Lazyload插件的 preLoad 参数，或者调整自定义指令中 IntersectionObserver 的配置，使得图片在更合适的时机加载。

3.4 兼容性处理

虽然 IntersectionObserver API提供了简洁高效的图片懒加载实现方式，但并非所有浏览器都支持该API。在实际项目中，需要考虑兼容性问题。可以使用polyfill来解决兼容性问题。例如，intersection - observer - polyfill 库可以在不支持 IntersectionObserver 的浏览器中模拟其功能。在项目中引入该polyfill库后，就可以放心地使用 IntersectionObserver 来实现图片懒加载，而不用担心浏览器兼容性问题。

npm install intersection - observer - polyfill --save

然后在项目入口文件中引入：

import 'intersection - observer - polyfill';

这样，即使在不支持 IntersectionObserver 的浏览器中，也能够正常实现图片懒加载功能。

四、不同场景下的图片懒加载应用

4.1 列表页面的图片懒加载

在电商、新闻等应用中，列表页面通常包含大量的图片。以电商商品列表为例，每个商品项可能都有一张展示图片。如果不进行图片懒加载，当页面加载时，所有商品图片会同时请求，导致页面加载缓慢。通过图片懒加载技术，只有当商品图片进入视口时才会加载，大大提升了列表页面的加载速度和滚动流畅性。

<template>
  <div>
    <ul>
      <li v - for="(product, index) in products" :key="index">
        <img v - lazy="product.image" alt="product - img">
        <p>{{ product.title }}</p>
      </li>
    </ul>
  </div>
</template>

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

Vue.use(VueLazyload, {
  preLoad: 1.5,
  error: 'error.jpg',
  loading: 'loading.gif'
});

export default {
  data() {
    return {
      products: [
        { image: 'product1.jpg', title: 'Product 1' },
        { image: 'product2.jpg', title: 'Product 2' },
        { image: 'product3.jpg', title: 'Product 3' }
      ]
    };
  }
};
</script>

在上述代码中，使用Vue - Lazyload插件对商品列表中的图片进行懒加载，通过合理设置 preLoad 等参数，优化图片加载时机。

4.2 无限滚动页面的图片懒加载

无限滚动页面是指当用户滚动到页面底部时，自动加载更多内容的页面。在这种场景下，图片懒加载尤为重要。随着用户不断滚动，新的图片会不断进入视口，如果每次加载的图片都立即请求，会很快耗尽用户的带宽和设备资源。以社交媒体的动态信息流为例，当用户滚动查看更多动态时，动态中的图片应按需加载。

<template>
  <div>
    <div v - for="(post, index) in posts" :key="index">
      <img v - lazy="post.image" alt="post - img">
      <p>{{ post.content }}</p>
    </div>
    <div v - if="hasMore" @scroll="loadMore">
      <!-- 加载更多内容的指示器 -->
    </div>
  </div>
</template>

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

Vue.use(VueLazyload, {
  preLoad: 1.2,
  error: 'error.jpg',
  loading: 'loading.gif'
});

export default {
  data() {
    return {
      posts: [],
      hasMore: true,
      page: 1
    };
  },
  mounted() {
    this.fetchPosts();
  },
  methods: {
    fetchPosts() {
      // 模拟从服务器获取数据
      setTimeout(() => {
        const newPosts = [
          { image: 'post1.jpg', content: 'Post 1 content' },
          { image: 'post2.jpg', content: 'Post 2 content' },
          { image: 'post3.jpg', content: 'Post 3 content' }
        ];
        this.posts = [...this.posts, ...newPosts];
        if (this.page >= 3) {
          this.hasMore = false;
        } else {
          this.page++;
        }
      }, 1000);
    },
    loadMore() {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      const clientHeight = document.documentElement.clientHeight;
      const scrollHeight = document.documentElement.scrollHeight;
      if (scrollTop + clientHeight >= scrollHeight - 100 && this.hasMore) {
        this.fetchPosts();
      }
    }
  }
};
</script>

在上述代码中，结合Vue - Lazyload实现图片懒加载，并通过监听滚动事件实现无限滚动加载更多内容。当页面滚动到距离底部100px以内且还有更多内容时，调用 fetchPosts 方法加载新的数据。

4.3 单页应用（SPA）中的图片懒加载

在单页应用中，由于页面切换不会重新加载整个页面，图片懒加载的实现需要考虑一些特殊情况。例如，当用户从一个路由页面切换到另一个路由页面时，新页面中的图片需要正确地进行懒加载。在Vue Router中，可以在路由组件的生命周期钩子函数中进行图片懒加载的初始化操作。

<template>
  <div>
    <img v - lazy="image.src" alt="spa - img">
  </div>
</template>

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

Vue.use(VueLazyload, {
  preLoad: 1.1,
  error: 'error.jpg',
  loading: 'loading.gif'
});

export default {
  data() {
    return {
      image: { src: 'image.jpg' }
    };
  },
  activated() {
    // 组件被激活时（进入路由页面）
    // 这里可以重新初始化图片懒加载相关操作
    // 例如重新设置IntersectionObserver观察元素等
  }
};
</script>

在上述代码中，通过 activated 生命周期钩子函数，在组件被激活（进入路由页面）时，可以对图片懒加载进行必要的初始化或重新配置，确保图片在单页应用的不同页面切换中能够正确地进行懒加载。

五、图片懒加载与SEO的关系

5.1 搜索引擎对懒加载图片的抓取

搜索引擎在抓取网页内容时，对于懒加载的图片可能存在一些挑战。传统的搜索引擎爬虫可能按照页面的原始HTML结构进行抓取，而懒加载图片在初始HTML中可能只存在占位符或虚假的 src 地址，这可能导致搜索引擎无法正确识别图片内容。为了提高搜索引擎对懒加载图片的抓取能力，可以采取以下措施：

  • 使用 noscript 标签：在 noscript 标签内提供图片的真实 src 地址，这样对于不支持JavaScript的搜索引擎爬虫或设备，仍然能够获取图片信息。
<noscript>
  <img src="image.jpg" alt="seo - img">
</noscript>
  • 提供替代文本描述：为图片添加详细准确的 alt 属性，这不仅有助于视障用户理解图片内容，也能帮助搜索引擎了解图片主题。
<img v - lazy="image.src" alt="A beautiful landscape photo" />

5.2 懒加载对页面SEO排名的影响

合理的图片懒加载技术实际上对页面的SEO排名是有益的。由于图片懒加载提升了页面的加载速度，而页面加载速度是搜索引擎排名算法中的一个重要因素。快速加载的页面能够提供更好的用户体验，搜索引擎更倾向于将这类页面排在搜索结果的前列。同时，如果处理好搜索引擎对懒加载图片的抓取问题，确保图片内容能够被搜索引擎正确识别，那么图片懒加载技术不会对页面的SEO造成负面影响，反而能够通过优化整体页面性能，提升页面在搜索引擎中的排名。

六、未来图片懒加载技术的发展趋势

6.1 与新的Web标准结合

随着Web技术的不断发展，新的标准和API不断涌现。未来，图片懒加载技术可能会与这些新的标准更紧密地结合。例如，loading="lazy" 是HTML最新引入的一个属性，它允许浏览器原生支持图片懒加载。在Vue项目中，可能会更好地利用这类原生特性，进一步简化图片懒加载的实现，同时提升性能和兼容性。

<template>
  <img :src="image.src" alt="future - img" loading="lazy">
</template>

<script>
export default {
  data() {
    return {
      image: { src: 'image.jpg' }
    };
  }
};
</script>

6.2 智能化的加载策略

未来的图片懒加载技术可能会更加智能化。不仅仅是基于视口的简单加载，而是能够根据用户的行为模式、网络状况等多因素动态调整加载策略。例如，对于经常快速滚动页面的用户，提前加载更多即将进入视口的图片；对于网络带宽较低的用户，优先加载低分辨率图片，待网络状况改善后再加载高分辨率图片。这种智能化的加载策略将进一步提升用户体验，同时优化资源利用。

6.3 与多媒体融合的懒加载

随着网页中多媒体内容的日益丰富，图片懒加载技术可能会扩展到与视频、音频等多媒体元素的融合。例如，实现视频的懒加载，只有当视频进入视口且用户有播放意愿时才加载视频资源，避免不必要的带宽浪费。同时，可能会出现统一的多媒体懒加载解决方案，能够同时处理图片、视频、音频等多种元素的懒加载，提升网页多媒体内容的整体加载性能。