深入解析 El-Image 视图内懒加载失灵背后的真相

2024-01-24 12:13:37

在构建用户界面的过程中，我们常常需要动态加载图像以优化页面性能。Vue.js 提供了 El-Image 组件，它可以通过 lazy 属性实现图像懒加载。然而，有时我们会遇到一个令人困惑的问题：即使图像在视图范围内，它也不会被加载。本文将深入分析这一问题的根源并提供切实可行的解决方案。

原因剖析

El-Image 组件的懒加载机制依赖于浏览器原生 lazyloading 机制。当 lazy 属性设置为 true 时，图像的 src 属性最初会被设为空字符串，并在图像进入视口后才真正加载。

然而，在某些情况下，浏览器可能无法正确检测图像是否在视口范围内。这可能发生在以下场景中：

容器具有 overflow: hidden 属性，导致图像被裁剪出视口。
容器的尺寸动态改变，例如通过动画或 JavaScript 操作。
页面加载时图像还没有被渲染到 DOM 中。

解决方案

解决此问题有以下几种方法：

1. 确保容器可见

确保图像所在的容器没有 overflow: hidden 属性，并且尺寸不会动态改变。

2. 使用 IntersectionObserver API

IntersectionObserver API 允许我们手动监听元素是否进入或离开视口。我们可以使用此 API 在图像进入视口后手动加载图像。

3. 使用条件加载

我们可以使用 JavaScript 条件语句在特定条件下加载图像，例如当页面滚动到一定位置或图像容器可见时。

示例代码

使用 IntersectionObserver API 的示例代码：

import { ref, onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    const imageRef = ref(null)
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          imageRef.value.src = imageSrc
        }
      })
    })

    onMounted(() => {
      observer.observe(imageRef.value)
    })

    onUnmounted(() => {
      observer.unobserve(imageRef.value)
    })

    return { imageRef }
  },
}