懒加载

懒加载包括：数据懒加载 和 图片懒加载

数据懒加载

当数据列表过长时，下面的数据可能并不需要显示，此时可以采用懒加载的方式，判断当前是否需要加载数据。

使用原生方法：

使用 IntersectionObserver

IntersectionObserver：创建监视对象，当元素出现在视口时会触发

template

<ul ref="boxRef">
  <li
    v-for="(item, index) in list5"
    :key="index"
  >
    {{ item.name }}
    <img
      class="img"
      :src="item.url"
      alt=""
    />
  </li>
</ul>

使用注意：

boxRef 必须是在不可见的区域才行

vue

<script setup>
  const boxRef = ref()
  onMounted(() => {
    const intersectionObserver = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        // 如果 intersectionRatio 为 0，则目标在视野外
        if (entry.intersectionRatio <= 0) {
          console.log('当前视图不可见')
          return
        }
        // 获取数据
        console.log('当前视图可见')
      })
    })
    // 开始监听
    intersectionObserver.observe(boxRef.value)
  })
</script>

使用 vueuse：

vue

<script setup lang="ts">
import { useIntersectionObserver } from '@vueuse/core'
const boxRef = ref()
onMounted(() => {
  /**
   * 参数1: 被监听元素
   * 参数2: 回调函数
   * 返回：stop方法，用于停止监听
   */
  const { stop } = useIntersectionObserver(
    boxRef,
    ([entry], observerElement) => {
      if (entry.intersectionRatio) {
        console.log('vueuse当前视图可见')
        getData()
        stop()
      } else {
        console.log('vueuse当前视图不可见')
      }
    }
  )
})
</script>

图片懒加载

方案一：<img src="https://xxx.jpg" loading="lazy" />
方案二：通过 自定义指令 + IntersectionObserver 实现图片懒加载。

方案二实现步骤：

缓存图片路径
将图片路径替换为占位图
监听图片是否进入可视区域，进入则加载图片，并替换占位图

v-lazy.tsmain.tsApp.vue

import type { App } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

export const lazy = (app: App) => {
  app.directive('lazy', {
    mounted(el) {
      // 1. 缓存图片路径
      const cacheUrl = el.src
      // 2. 替换成占位图
      el.src = './vite.svg'
      // 3. 监听图片是否进入可视区
      const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
        if (isIntersecting) {
          // 4. 进入可视区，替换图片路径
          el.src = cacheUrl
          // 5. 停止监听
          stop()
        }
      })
    }
  })
}

import { createApp } from 'vue'
import App from './App.vue'
import { lazy } from './v-lazy'

createApp(App).use(lazy).mount('#app')

vue

<template>
  <ul>
    <li
      v-for="(item, index) in list"
      :key="index"
    >
      {{ item.name }}
      <img
        class="img"
        :src="item.url"
        v-lazy="item.url"
      />
    </li>
  </ul>
</template>

加载大量图片优化方案

图片懒加载：只加载可见区域内的图片，当用户滚动到图片时再加载。这可以通过监听滚动事件来实现。
图片延迟加载：延迟加载非必要图片，例如，页面初次加载时只加载可见部分的图片，然后在后台加载其他图片，以加快初始加载速度。
图片压缩和优化：确保图片文件大小尽可能小，以减少加载时间。您可以使用图像编辑工具来压缩图像，并选择适当的格式（例如，WebP 格式通常比JPEG更高效）。
图片懒加载占位符：在图片加载前，可以使用占位符，例如loading动画或者低分辨率的预览图像。
图片切割：将大图切成多个小图，只加载用户当前可见部分，根据用户的滚动动态加载更多部分。
图片CDN：使用内容分发网络（CDN）来加速图像加载，将图像存储在距用户更近的服务器上。
建立图像缓存：一旦图像加载完成，将其缓存到浏览器本地存储中，以便下次访问时能够更快地加载。
预加载：在页面加载过程中，可以提前加载部分图片，可通过在页面底部添加一个 <img> 标签集合来实现。
响应式图片：根据不同的屏幕大小和设备类型，加载不同尺寸的图片，以减少不必要的带宽消耗。
Web Workers并行加载：使用Web Workers来并行加载多个图片，以加快加载速度。

懒加载 ​

数据懒加载 ​

图片懒加载 ​

加载大量图片优化方案 ​

懒加载

数据懒加载

图片懒加载

加载大量图片优化方案