JS中img.onload为何有时未正确触发导致图片加载状态判断出错？

Question

在JavaScript中，`img.onload`事件有时未正确触发，通常是由于图片加载完成早于事件绑定。当图片已缓存在浏览器中，其加载可能在`onload`监听器设置前就已完成，导致事件无法触发。解决此问题的方法之一是在创建``元素后立即检查`complete`属性。如果`img.complete`为`true`，说明图片已加载完毕，可直接执行相关逻辑，无需依赖`onload`事件。此外，确保在设置`src`属性之前绑定`onload`事件，以避免因加载顺序引发的遗漏。例如： ```javascript const img = new Image(); img.onload = () => console.log('加载成功'); img.onerror = () => console.log('加载失败'); img.src = 'example.jpg'; if (img.complete) { console.log('图片已从缓存加载'); } ``` 通过以上方法，可有效减少因加载状态判断错误引发的问题。

Answer 1

1. 问题背景与现象

在JavaScript中，处理图片加载时，`img.onload`事件有时未被正确触发。这种现象通常发生在图片已经缓存在浏览器中，而`onload`监听器在图片加载完成后才被绑定的情况下。由于加载顺序的不一致，导致事件无法正常触发。

以下是常见的问题场景：

• 当图片从缓存加载时，`onload`可能无法触发。
• 如果`src`属性设置在事件绑定之后，可能会错过加载完成的通知。

为了更好地理解问题的本质，我们需要深入分析其原因和解决方案。

2. 原因分析

`img.onload`事件未触发的根本原因是事件绑定和图片加载的顺序不匹配。以下是具体的原因：

1. 缓存机制的影响： 当图片已经被缓存时，浏览器会立即认为图片已加载完成，因此在绑定`onload`之前，加载过程就已经结束。
2. 事件绑定时机： 如果`src`属性在绑定事件之前被设置，那么图片加载完成时，事件监听器尚未准备好。

为了解决这个问题，我们可以采取以下措施：

3. 解决方案

以下是两种有效的方法来解决`img.onload`事件未触发的问题：

方法	描述
检查`complete`属性	在创建``元素后，立即检查`img.complete`属性。如果该属性为`true`，则说明图片已经加载完毕，可以直接执行相关逻辑。
先绑定事件再设置`src`	确保在设置`src`属性之前绑定`onload`事件，以避免加载顺序引发的遗漏。

下面是一个综合了上述两种方法的代码示例：

const img = new Image();
img.onload = () => console.log('加载成功');
img.onerror = () => console.log('加载失败');
// 先绑定事件
if (img.complete) {
  console.log('图片已从缓存加载');
}
// 设置src属性
img.src = 'example.jpg';
  

4. 流程图说明

以下是处理图片加载的流程图，展示了如何通过检查`complete`属性和调整事件绑定顺序来避免问题：

sequenceDiagram
      participant JS as JavaScript
      participant IMG as Image Object
      JS->>IMG: 创建Image对象
      JS->>IMG: 检查img.complete
      alt complete为true
        JS->>JS: 执行缓存加载逻辑
      else complete为false
        JS->>IMG: 绑定onload事件
        JS->>IMG: 设置src属性
      end

通过以上流程，可以确保无论图片是否从缓存加载，都能正确触发加载完成的逻辑。