JavaScript监听资源加载的方法主要有：1.使用onload和onerror事件处理图片加载；2.通过promise封装实现更现代化的图片加载管理；3.onload或addeventlistener方法用于监听脚本加载完成；4.onerror事件或catch方法处理加载失败情况；5.创建link元素或定时器检测样式表加载；6.mutationobserver监听dom变化以追踪资源加载；7.配置crossorigin属性和服务器端cors头部处理跨域资源。这些方法确保在资源加载完成后执行特定操作，提升页面性能与用户体验。
JavaScript 监听资源加载，本质上就是在资源完成加载时执行一段特定的代码。这在处理图片、脚本、样式表等外部资源时非常有用，可以确保在资源可用后再进行后续操作，避免因资源未加载完成而导致的错误。
监听资源加载的方法有很多，最常见的是使用事件监听器。例如，对于图片，我们可以监听 load 事件；对于脚本，可以监听 onload 事件。不同类型的资源，监听方式略有不同，需要根据实际情况选择。
JavaScript监听资源加载，能解决很多实际问题，比如页面加载优化、动画效果的实现，甚至是错误处理。
立即学习“Java免费学习笔记（深入）”；
如何监听图片加载完成？
图片加载是前端开发中非常常见的需求。最直接的方法就是使用 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 属性来指定跨域资源的加载方式。
@@##@@
crossorigin 属性可以设置为 anonymous 或者 use-credentials。anonymous 表示不发送用户凭据，而 use-credentials 表示发送用户凭据。
需要注意的是，如果服务器端没有正确配置 CORS 头部，跨域资源加载可能会失败。
