当前位置：首页 > VUE

vue实现延迟加载

2026-01-17 14:38:09VUE

Vue 实现延迟加载的方法

使用动态导入（Dynamic Import）和异步组件

在 Vue 中，可以通过动态导入语法结合异步组件实现延迟加载。这种方式会在需要时才加载组件，而不是在初始加载时一并加载。

const LazyComponent = () => import('./components/LazyComponent.vue');

在路由配置中使用动态导入可以实现路由级别的延迟加载：

const routes = [
  {
    path: '/lazy',
    component: () => import('./views/LazyView.vue')
  }
];

使用 Suspense 处理异步组件加载状态

Vue 3 提供了 Suspense 组件，可以更好地处理异步组件的加载状态，显示加载中的占位内容。

<template>
  <Suspense>
    <template #default>
      <LazyComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

<script>
const LazyComponent = defineAsyncComponent(() => 
  import('./components/LazyComponent.vue')
);
</script>

使用 Intersection Observer 实现图片延迟加载

对于图片等资源的延迟加载，可以结合 Intersection Observer API 实现：

<template>
  <img v-lazy="imageUrl" alt="Lazy loaded image">
</template>

<script>
import { directive } from 'vue-lazyload';

export default {
  directives: {
    lazy: directive
  },
  data() {
    return {
      imageUrl: 'path/to/image.jpg'
    };
  }
};
</script>

使用第三方库 vue-lazyload

vue-lazyload 是一个专门用于 Vue 的延迟加载库，可以简化图片和组件的延迟加载实现。

安装：

npm install vue-lazyload

使用：

import VueLazyload from 'vue-lazyload';

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
});

自定义指令实现延迟加载

可以创建自定义指令来实现更灵活的延迟加载逻辑：

Vue.directive('lazy', {
  inserted: (el, binding) => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          el.src = binding.value;
          observer.unobserve(el);
        }
      });
    });
    observer.observe(el);
  }
});