JavaScript中的 image 監聽是一種非常重要的技術，它使得開發者可以在圖片加載過程中執行一些操作，比如顯示加載進度條、在圖片加載完成后將其插入到頁面中、在圖片加載過程中顯示一張占位圖等。接下來我們將詳細介紹如何使用 JavaScript 監聽圖片加載事件。

在 JavaScript 中，我們可以使用 Image 對象來加載圖片。Image 對象有一個load事件，我們可以使用該事件來監聽圖片加載完成的狀態。當圖片加載完成后，該事件會被觸發。以下是一個簡單的示例：

const img = new Image();
img.addEventListener('load', () =>{
console.log('圖片加載完成');
});
img.src = 'https://example.com/image.jpg';

在這個示例中，我們創建了一個新的 Image 對象，并給它設置了一個 load 事件監聽器。當圖片加載完成后，我們會在控制臺輸出一條消息。

在實際開發中，我們可能需要監聽多個圖片的加載事件，并在所有圖片都加載完成后執行一些操作。我們可以使用 Promise 和 Promise.all 方法來實現這個功能。以下是一個使用 Promise 和 Promise.all 方法監聽多個圖片加載事件的示例：

const promises = [];
const urls = ['https://example.com/image1.jpg', 'https://example.com/image2.jpg'];
urls.forEach((url) =>{
promises.push(new Promise((resolve) =>{
const img = new Image();
img.addEventListener('load', () =>{
resolve();
});
img.src = url;
}));
});
Promise.all(promises).then(() =>{
console.log('所有圖片加載完成');
});

在這個示例中，我們首先創建了一個 promises 數組，用于存儲每個圖片加載完成的 Promise 對象。然后，我們循環遍歷圖片 URL 數組，為每個圖片創建一個新的 Promise 對象，當圖片加載完成后，手動調用 resolve 方法來結束 Promise。最后，我們使用 Promise.all 方法來等待所有 Promise 對象的狀態變為 resolved，并在所有圖片都加載完成后輸出一條消息。

除了可以在圖片加載完成后執行一些操作，我們還可以使用 load 事件來檢查圖片是否存在。如果圖片不存在，load 事件不會被觸發，我們可以使用 error 事件來處理這種情況。以下是一個檢查圖片是否存在的示例：

const img = new Image();
img.addEventListener('load', () =>{
console.log('圖片存在');
});
img.addEventListener('error', () =>{
console.log('圖片不存在');
});
img.src = 'https://example.com/image.jpg';

在這個示例中，我們給 Image 對象同時添加了 load 和 error 事件監聽器。當圖片存在時，load 事件會被觸發，我們會在控制臺輸出一條消息；當圖片不存在時，error 事件會被觸發，我們同樣會在控制臺輸出另一條消息。

在最后，我們需要注意的是，在加載圖片時可能會遇到跨域問題。如果圖片 URL 地址與當前頁面的域名不一致，瀏覽器可能會阻止我們對圖片進行操作。為了解決這個問題，我們可以使用 CORS 或者 JSONP 等技術。