AJAX（Asynchronous JavaScript and XML）是一種用于創建快速、動態網頁的技術。在使用AJAX開發的網頁中，實時加載圖片是常見的需求。通過AJAX，網頁可以在不刷新整個頁面的情況下，異步地加載圖片。這樣，用戶在瀏覽網頁的同時，可以享受到更加流暢的體驗。本文將介紹如何使用AJAX加載圖片，并通過舉例說明其優勢。

在傳統的網頁中，用戶訪問一個頁面后，所有的內容都會一次性加載完畢。如果其中包含大量的圖片，在加載過程中會消耗大量的時間。這樣，用戶在等待頁面加載完成時，只能干等著，無法進行任何其他的操作。而使用AJAX加載圖片后，用戶可以先看到頁面的其他內容，然后在后臺異步加載圖片。用戶可以繼續進行其他操作，同時，圖片會逐漸地出現在頁面上。

// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 監聽加載事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 圖片加載完成后的處理邏輯
}
};
// 發送請求
xhr.open('GET', 'image.jpg', true);
xhr.send();

假設我們有一個圖片相冊網站，用戶可以在相冊中瀏覽圖片。傳統的做法是，用戶點擊某個相冊后，應用程序會加載整個相冊的所有圖片。而使用AJAX加載圖片的做法是，用戶點擊某個相冊后，應用程序會先加載相冊的封面圖片，然后在后臺異步加載其他圖片。這樣，用戶可以在等待其他圖片加載的同時，繼續瀏覽其他相冊。

除了圖片相冊，AJAX加載圖片還可以應用在其他場景中。比如，在一個電商網站中，用戶在瀏覽商品列表時，可以先加載商品的基本信息，包括名稱、價格和描述等。當用戶點擊某個商品進一步查看詳情時，應用程序會在后臺異步加載商品的圖片。這樣，用戶可以先看到商品的基本信息，然后再等待圖片加載完成。

// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 監聽加載事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 圖片加載完成后的處理邏輯
var img = document.createElement('img');
img.src = 'image.jpg';
document.body.appendChild(img);
}
};
// 發送請求
xhr.open('GET', 'image-info.json', true);
xhr.send();

從上面的例子可以看出，使用AJAX加載圖片的流程大致如下：

1. 創建XMLHttpRequest對象。
2. 監聽加載事件，在加載完成后處理圖片。
3. 發送請求。
4. 圖片加載完成后的處理邏輯中，創建一個img元素，設置src屬性為圖片的URL，并將圖片添加到頁面中。

總之，使用AJAX加載圖片可以提升網頁的用戶體驗。用戶可以先看到頁面的其他內容，然后在后臺加載圖片。這樣，用戶無需等待圖片加載完成，就可以繼續操作頁面。無論是圖片相冊、電商網站還是其他類型的網頁，AJAX加載圖片都可以提高頁面加載速度，并提升用戶的交互體驗。