懒加载

约 1157 字大约 4 分钟

2025-03-14

在包含许多图片的长网页或应用中，如果一开始就加载所有图片，会导致页面加载缓慢，并且浪费用户的流量和服务器资源。

通过懒加载，页面在加载时只会加载当前可见区域的内容，而不会一次性加载所有图片。当用户滚动页面时，懒加载会动态地加载其他部分的内容，这样可以加快页面加载速度，减少数据传输量，并提高用户体验。

在前端开发中，懒加载常用于图片、视频以及需要滚动页面才能看到的内容，比如加载更多的帖子或商品。这种技术帮助页面在开始时只加载必要的内容，用户需要查看其他部分时再进行加载，从而减少初始加载时间。

总的来说，懒加载通过延迟加载页面内容或资源，能够提升页面加载速度，减少数据传输量，并优化用户体验，是一种重要的前端性能优化方法。

懒加载的实现原理

懒加载的实现原理主要涉及延迟加载页面中的内容，特别是图片和其他资源，以减少初始加载时的压力和等待时间。

具体来说，对于图片，它们通常是通过src属性来加载的。当网页加载时，浏览器会按照src的地址请求图片资源。懒加载的原理是利用HTML5中的data-xxx属性（这里以data-src为例）来存储图片的路径。在需要加载图片时，通过JavaScript将data-src中的图片路径赋值给src，这样就实现了图片的按需加载，即懒加载。

重点在于确定用户需要加载哪些图片。在浏览器中，用户可见区域内的资源是用户需要的资源。因此，当图片出现在可见区域时，我们可以获取图片的真实地址并赋值给图片元素即可。

具体实现

原生JavaScript

window.innerHeight：浏览器可视区域的高度
document.body.scrollTop 或 document.documentElement.scrollTop：浏览器已滚动的距离
img.offsetTop：图片顶部相对于文档顶部的高度（包括滚动条的距离）
图片加载条件：img.offsetTop < window.innerHeight + document.body.scrollTop

利用前端框架

在 Vue 中，懒加载可以通过代码拆分和动态导入实现。我们可以使用 Vue 的 defineAsyncComponent来实现懒加载。

Component.vue

<template>
  <div>
    <p>This is a lazy-loaded component.</p>
  </div>
</template>
<script>
export default {
  name: "HelloWorld"
};
</script>

App.vue

<template>
  <div id="app">
    <h1>Vue Lazy Load Example</h1>
    <button @click="loadComponent">Load HelloWorld Component</button>
    <component v-if="isComponentLoaded" :is="asyncComponent" />
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue';

export default {
  data() {
    return {
      isComponentLoaded: false,
      asyncComponent: null
    };
  },
  methods: {
    loadComponent() {
      this.asyncComponent = defineAsyncComponent(() =>
        import('./components/Component.vue')
      );
      this.isComponentLoaded = true;
    }
  }
};
</script>

还可以使用Vue的第三方库vue-lazyload通过 v-lazy 指令来实现图片的懒加载。

懒加载与预加载的区别

懒加载和预加载是为了提高网页性能而采取的两种不同策略。它们的核心区别在于一个是延迟加载，一个是提前加载，而且实现方式和影响也略有不同。

懒加载（也被称为延迟加载）的核心思想是：在用户需要访问图片或其他资源时，再去加载这些内容。这个策略可以减轻服务器的压力，因为不需要一开始就加载所有资源。懒加载适用于网站中有很多图片，或者页面很长的情况，比如电商网站。它的实现原理是，当页面滚动时，判断图片是否进入了可视区域，如果是，就从事先保存好的真实路径中获取图片地址，然后赋值给图片的src属性，这样就实现了图片的延迟加载。

预加载则是在页面加载过程中提前加载可能会在后续访问中用到的资源。这样一来，当用户需要某些资源时，可以直接从缓存中获取，而不需要重新请求服务器，从而减少了等待时间，提高了用户体验。预加载通常应用于未来可能会用到的内容，例如提前加载下一个页面的资源、准备将要播放的视频或音频文件等。这样一来，用户在真正需要这些资源时，可以立刻获取，而不必等待加载时间。