JavaScript監(jiān)聽資源加載的方法主要有：1.使用onload和onerror事件處理圖片加載；2.通過promise封裝實現(xiàn)更現(xiàn)代化的圖片加載管理；3.onload或addeventlistener方法用于監(jiān)聽腳本加載完成；4.onerror事件或catch方法處理加載失敗情況；5.創(chuàng)建link元素或定時器檢測樣式表加載；6.mutationobserver監(jiān)聽dom變化以追蹤資源加載；7.配置crossorigin屬性和服務(wù)器端cors頭部處理跨域資源。這些方法確保在資源加載完成后執(zhí)行特定操作，提升頁面性能與用戶體驗。
JavaScript 監(jiān)聽資源加載，本質(zhì)上就是在資源完成加載時執(zhí)行一段特定的代碼。這在處理圖片、腳本、樣式表等外部資源時非常有用，可以確保在資源可用后再進(jìn)行后續(xù)操作，避免因資源未加載完成而導(dǎo)致的錯誤。
監(jiān)聽資源加載的方法有很多，最常見的是使用事件監(jiān)聽器。例如，對于圖片，我們可以監(jiān)聽 load 事件；對于腳本，可以監(jiān)聽 onload 事件。不同類型的資源，監(jiān)聽方式略有不同，需要根據(jù)實際情況選擇。
JavaScript監(jiān)聽資源加載，能解決很多實際問題，比如頁面加載優(yōu)化、動畫效果的實現(xiàn)，甚至是錯誤處理。
立即學(xué)習(xí)“Java免費學(xué)習(xí)筆記（深入）”；
如何監(jiān)聽圖片加載完成？
圖片加載是前端開發(fā)中非常常見的需求。最直接的方法就是使用 onload 事件。
const img = new Image(); img.onload = function() { // 圖片加載完成后的操作 console.log('圖片加載完成'); // 可以進(jìn)行圖片尺寸獲取、動畫處理等操作 }; img.onerror = function() { // 圖片加載失敗的處理 console.error('圖片加載失敗'); }; img.src = 'path/to/your/image.jpg';
這段代碼創(chuàng)建了一個新的 Image 對象，并為其 onload 和 onerror 事件分別綁定了處理函數(shù)。onload 函數(shù)會在圖片成功加載后執(zhí)行，而 onerror 函數(shù)會在加載失敗時執(zhí)行。img.src 用于設(shè)置圖片的 URL，從而觸發(fā)加載過程。
除了 onload 事件，還可以使用 Promise 來處理圖片加載。這種方式更加現(xiàn)代化，也更易于處理多個圖片的加載。
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 方法。
如何監(jiān)聽 JavaScript 腳本加載完成？
監(jiān)聽 JavaScript 腳本加載完成同樣重要，尤其是在動態(tài)加載腳本的情況下。可以使用 onload 事件，也可以使用 addEventListener 方法。
const script = document.createElement('script'); script.onload = function() { // 腳本加載完成后的操作 console.log('腳本加載完成'); // 可以調(diào)用腳本中的函數(shù)，或者執(zhí)行其他操作 }; script.onerror = function() { // 腳本加載失敗的處理 console.error('腳本加載失敗'); }; script.src = 'path/to/your/script.js'; document.head.appendChild(script);
這段代碼動態(tài)創(chuàng)建一個 script 元素，并為其 onload 和 onerror 事件分別綁定了處理函數(shù)。然后將 script 元素添加到 head 元素中，從而觸發(fā)腳本的加載。
addEventListener 方法也是一個不錯的選擇，它允許為一個元素綁定多個事件監(jiān)聽器。
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); // 可以顯示默認(rèn)圖片，或者提示用戶 img.src = 'path/to/default/image.jpg'; }; img.src = 'path/to/your/image.jpg';
在 onerror 函數(shù)中，可以進(jìn)行錯誤處理，例如顯示默認(rèn)圖片，或者提示用戶。重要的是要確保用戶體驗，避免因資源加載失敗而導(dǎo)致頁面崩潰。
除了 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); // 可以進(jìn)行錯誤處理，例如重新加載腳本 }
需要注意的是，try…catch 語句只能捕獲同步代碼中的錯誤，無法捕獲異步代碼中的錯誤。因此，對于異步加載的資源，應(yīng)該使用 onerror 事件或者 Promise 的 catch 方法來處理加載失敗的情況。
如何監(jiān)聽 css 樣式表加載完成？
監(jiān)聽 CSS 樣式表加載完成相對復(fù)雜一些，因為 CSS 文件本身沒有 onload 事件。一種常見的做法是創(chuàng)建一個 link 元素，并監(jiān)聽其 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 數(shù)組，如果找到了指定 URL 的樣式表，就認(rèn)為樣式表加載完成。
如何使用 MutationObserver 監(jiān)聽資源加載？
MutationObserver 是一種監(jiān)聽 DOM 變化的 API，可以用來監(jiān)聽資源的加載情況。例如，可以監(jiān)聽 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);
這種方法比較靈活，可以監(jiān)聽多種類型的資源加載情況。但是，需要注意的是，MutationObserver 只能監(jiān)聽 DOM 變化，無法直接判斷資源是否加載完成。
如何處理跨域資源加載？
跨域資源加載涉及到 CORS (Cross-Origin Resource Sharing) 問題。如果需要加載跨域資源，需要在服務(wù)器端配置 CORS 頭部，允許客戶端訪問。
Access-Control-Allow-Origin: *
在客戶端，可以使用 crossorigin 屬性來指定跨域資源的加載方式。
@@##@@
crossorigin 屬性可以設(shè)置為 anonymous 或者 use-credentials。anonymous 表示不發(fā)送用戶憑據(jù)，而 use-credentials 表示發(fā)送用戶憑據(jù)。
需要注意的是，如果服務(wù)器端沒有正確配置 CORS 頭部，跨域資源加載可能會失敗。
