JavaScript 资源加载事件：onload 和 onerror

在 JavaScript 中，onload 和 onerror 是用于处理资源加载状态的两种重要事件处理器。它们可以帮助你监控页面中各种资源的加载情况，并做出相应的处理。

onload 事件

onload 事件在资源成功加载完成后触发。

使用场景

1. 图片加载完成

   const img = new Image();
   img.onload = function() {
     console.log('图片加载成功');
     document.body.appendChild(img);
   };
   img.src = 'image.jpg';
   

2. 脚本加载完成

   const script = document.createElement('script');
   script.onload = function() {
     console.log('脚本加载成功');
   };
   script.src = 'script.js';
   document.head.appendChild(script);
   

3. 样式表加载完成

   const link = document.createElement('link');
   link.rel = 'stylesheet';
   link.onload = function() {
     console.log('样式表加载成功');
   };
   link.href = 'styles.css';
   document.head.appendChild(link);
   

onerror 事件

onerror 事件在资源加载失败时触发。

使用场景

1. 图片加载失败

   const img = new Image();
   img.onerror = function() {
     console.log('图片加载失败');
     img.src = 'fallback-image.jpg'; // 加载备用图片
   };
   img.src = 'non-existent-image.jpg';
   

2. 脚本加载失败

   const script = document.createElement('script');
   script.onerror = function() {
     console.log('脚本加载失败，使用备用方案');
     // 可以在这里加载备用脚本或执行其他补救措施
   };
   script.src = 'non-existent-script.js';
   document.head.appendChild(script);
   

同时使用 onload 和 onerror

const resource = new Image();

resource.onload = function() {
  console.log('资源加载成功');
  // 成功后的处理逻辑
};

resource.onerror = function() {
  console.log('资源加载失败');
  // 失败后的处理逻辑
};

resource.src = 'resource.png';

注意事项

1. 事件绑定顺序：应该在设置 src 或 href 属性之前绑定事件处理器，以避免竞争条件。

2. 跨域资源：对于跨域资源，某些浏览器可能会限制获取详细的错误信息。

3. 事件处理器类型：

   • 也可以使用 addEventListener 方法：

     img.addEventListener('load', function() {
       console.log('图片加载成功');
     });
     

4. window.onerror：全局错误处理与资源加载错误不同，window.onerror 用于捕获全局 JavaScript 错误。

5. Promise 方式：现代 JavaScript 也可以使用 Promise 来处理资源加载：

   function loadImage(url) {
     return new Promise((resolve, reject) => {
       const img = new Image();
       img.onload = () => resolve(img);
       img.onerror = reject;
       img.src = url;
     });
   }
   
   loadImage('image.jpg')
     .then(img => document.body.appendChild(img))
     .catch(() => console.log('加载失败'));
   

通过合理使用 onload 和 onerror 事件，你可以更好地控制资源的加载过程，提高网页的健壮性和用户体验。