JavaScript资源加载监听方法全解析

有志者，事竟成！如果你在学习文章，那么本文《JavaScript监听资源加载的常见方法有以下几种，适用于不同的使用场景：1. window.onload这是最简单的方式，用于在整个页面（包括图片、脚本、样式表等）加载完成后执行代码。window.onload = function() { console.log("页面所有资源加载完成"); };⚠️ 注意：如果页面中有大量资源，可能会导致 onload 延迟触发。2. DOMContentLoaded 事件这个事件在DOM结构加载完成时触发，但不等待图片、样式表等外部资源加载。document.addEventListener("DOMContentLoaded", function() { console.log("DOM结构已加载完成"); });✅ 推荐用于需要在页面结构准备好后立即执行的代码。3. 监听特定资源加载（如图片、音频等）a. 监听图片加载完成const img = new Image(); img.src = "image.jpg"; img.onload = function() { console.log("图片加载完成"); }; img.onerror = function() { console.log("图片加载失败"); };b. 监听音频/视频加载const audio = new Audio("audio.mp3"); audio.onloadeddata = function() { console.log("音频数据已加载"); };》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

JavaScript监听资源加载的方法主要有：1.使用onload和onerror事件处理图片加载；2.通过Promise封装实现更现代化的图片加载管理；3.onload或addEventListener方法用于监听脚本加载完成；4.onerror事件或catch方法处理加载失败情况；5.创建link元素或定时器检测样式表加载；6.MutationObserver监听DOM变化以追踪资源加载；7.配置crossorigin属性和服务器端CORS头部处理跨域资源。这些方法确保在资源加载完成后执行特定操作，提升页面性能与用户体验。

JavaScript 监听资源加载，本质上就是在资源完成加载时执行一段特定的代码。这在处理图片、脚本、样式表等外部资源时非常有用，可以确保在资源可用后再进行后续操作，避免因资源未加载完成而导致的错误。

监听资源加载的方法有很多，最常见的是使用事件监听器。例如，对于图片，我们可以监听 load 事件；对于脚本，可以监听 onload 事件。不同类型的资源，监听方式略有不同，需要根据实际情况选择。

JavaScript监听资源加载，能解决很多实际问题，比如页面加载优化、动画效果的实现，甚至是错误处理。

如何监听图片加载完成？

图片加载是前端开发中非常常见的需求。最直接的方法就是使用 onload 事件。

const img = new Image();
img.onload = function() {
  // 图片加载完成后的操作
  console.log('图片加载完成');
  // 可以进行图片尺寸获取、动画处理等操作
};
img.onerror = function() {
  // 图片加载失败的处理
  console.error('图片加载失败');
};
img.src = 'path/to/your/image.jpg';

这段代码创建了一个新的 Image 对象，并为其 onload 和 onerror 事件分别绑定了处理函数。onload 函数会在图片成功加载后执行，而 onerror 函数会在加载失败时执行。img.src 用于设置图片的 URL，从而触发加载过程。

除了 onload 事件，还可以使用 Promise 来处理图片加载。这种方式更加现代化，也更易于处理多个图片的加载。

function loadImage(src) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = src;
  });
}

loadImage('path/to/your/image.jpg')
  .then(img => {
    // 图片加载完成后的操作
    console.log('图片加载完成', img);
  })
  .catch(error => {
    // 图片加载失败的处理
    console.error('图片加载失败', error);
  });

这种方式将图片加载封装成一个 Promise 对象，可以使用 then 方法处理加载成功的情况，使用 catch 方法处理加载失败的情况。如果需要同时加载多个图片，可以使用 Promise.all 方法。

如何监听 JavaScript 脚本加载完成？

监听 JavaScript 脚本加载完成同样重要，尤其是在动态加载脚本的情况下。可以使用 onload 事件，也可以使用 addEventListener 方法。

const script = document.createElement('script');
script.onload = function() {
  // 脚本加载完成后的操作
  console.log('脚本加载完成');
  // 可以调用脚本中的函数，或者执行其他操作
};
script.onerror = function() {
  // 脚本加载失败的处理
  console.error('脚本加载失败');
};
script.src = 'path/to/your/script.js';
document.head.appendChild(script);

这段代码动态创建一个 script 元素，并为其 onload 和 onerror 事件分别绑定了处理函数。然后将 script 元素添加到 head 元素中，从而触发脚本的加载。

addEventListener 方法也是一个不错的选择，它允许为一个元素绑定多个事件监听器。

const script = document.createElement('script');
script.addEventListener('load', function() {
  // 脚本加载完成后的操作
  console.log('脚本加载完成');
});
script.addEventListener('error', function() {
  // 脚本加载失败的处理
  console.error('脚本加载失败');
});
script.src = 'path/to/your/script.js';
document.head.appendChild(script);

如何处理资源加载失败的情况？

资源加载失败是不可避免的，因此需要妥善处理。onerror 事件或者 Promise 的 catch 方法可以用来捕获加载失败的错误。

const img = new Image();
img.onload = function() {
  console.log('图片加载完成');
};
img.onerror = function(error) {
  console.error('图片加载失败', error);
  // 可以显示默认图片，或者提示用户
  img.src = 'path/to/default/image.jpg';
};
img.src = 'path/to/your/image.jpg';

在 onerror 函数中，可以进行错误处理，例如显示默认图片，或者提示用户。重要的是要确保用户体验，避免因资源加载失败而导致页面崩溃。

除了 onerror 事件，还可以使用 try...catch 语句来捕获加载失败的错误。

try {
  const script = document.createElement('script');
  script.src = 'path/to/your/script.js';
  document.head.appendChild(script);
} catch (error) {
  console.error('脚本加载失败', error);
  // 可以进行错误处理，例如重新加载脚本
}

需要注意的是，try...catch 语句只能捕获同步代码中的错误，无法捕获异步代码中的错误。因此，对于异步加载的资源，应该使用 onerror 事件或者 Promise 的 catch 方法来处理加载失败的情况。

如何监听 CSS 样式表加载完成？

监听 CSS 样式表加载完成相对复杂一些，因为 CSS 文件本身没有 onload 事件。一种常见的做法是创建一个 link 元素，并监听其 onload 和 onerror 事件。

const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'path/to/your/style.css';
link.onload = function() {
  console.log('样式表加载完成');
};
link.onerror = function() {
  console.error('样式表加载失败');
};
document.head.appendChild(link);

另一种方法是使用 JavaScript 定时器来检测样式表是否加载完成。这种方法比较hacky，但有时候是唯一的选择。

function checkStylesheetLoaded(url, callback) {
  let interval = setInterval(function() {
    for (let i = 0; i < document.styleSheets.length; i++) {
      if (document.styleSheets[i].href === url) {
        clearInterval(interval);
        callback();
        return;
      }
    }
  }, 100);
}

checkStylesheetLoaded('path/to/your/style.css', function() {
  console.log('样式表加载完成');
});

这种方法会定期检查 document.styleSheets 数组，如果找到了指定 URL 的样式表，就认为样式表加载完成。

如何使用 MutationObserver 监听资源加载？

MutationObserver 是一种监听 DOM 变化的 API，可以用来监听资源的加载情况。例如，可以监听 script 元素的 src 属性的变化，从而判断脚本是否开始加载。

const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
      console.log('脚本开始加载', mutation.target.src);
    }
  });
});

const script = document.createElement('script');
observer.observe(script, { attributes: true });
script.src = 'path/to/your/script.js';
document.head.appendChild(script);

这种方法比较灵活，可以监听多种类型的资源加载情况。但是，需要注意的是，MutationObserver 只能监听 DOM 变化，无法直接判断资源是否加载完成。

如何处理跨域资源加载？

跨域资源加载涉及到 CORS (Cross-Origin Resource Sharing) 问题。如果需要加载跨域资源，需要在服务器端配置 CORS 头部，允许客户端访问。

Access-Control-Allow-Origin: *

在客户端，可以使用 crossorigin 属性来指定跨域资源的加载方式。

<img src="https://example.com/image.jpg" crossorigin="anonymous">

crossorigin 属性可以设置为 anonymous 或者 use-credentials。anonymous 表示不发送用户凭据，而 use-credentials 表示发送用户凭据。

需要注意的是，如果服务器端没有正确配置 CORS 头部，跨域资源加载可能会失败。

文中关于资源加载的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript资源加载监听方法全解析》文章吧，也可关注golang学习网公众号了解相关技术文章。