AJAX（Asynchronous JavaScript and XML）是一種用于創建動態網頁的技術，它實現了在不重新加載整個網頁的情況下，從服務器異步加載數據。在使用AJAX進行數據交互時，我們常常需要加載圖片。本文將介紹如何使用AJAX實現異步加載圖片的效果，并通過幾個例子來說明其實際應用。

在網頁中，圖片的加載速度經常會影響用戶的體驗。如果某個頁面中包含大量圖片，并且這些圖片需要從服務器端加載，那么頁面加載的時間就會變長。為了提升用戶體驗，我們可以使用AJAX來實現異步加載圖片。

下面是一個例子，展示了如何使用AJAX異步加載圖片：

<div id="imageContainer">
<img data-src="image1.jpg" alt="Image 1">
<img data-src="image2.jpg" alt="Image 2">
<img data-src="image3.jpg" alt="Image 3">
</div>

function loadImages() {
var imageContainer = document.getElementById('imageContainer');
var images = imageContainer.getElementsByTagName('img');
for (var i = 0; i< images.length; i++) {
var image = images[i];
var src = image.getAttribute('data-src');
var xhr = new XMLHttpRequest();
xhr.open('GET', src, true);
xhr.responseType = 'blob';
xhr.onload = function() {
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(this.response);
image.src = imageUrl;
};
xhr.send();
}
}
loadImages();

以上代碼中，我們首先獲取了一個包含需要加載的圖片的容器，并獲取容器中的每張圖片。然后，我們使用AJAX發送GET請求，將圖片的URL傳遞給服務器進行請求。通過設置`responseType`為`blob`，我們得到了一個Blob對象，它可以用于生成圖片的URL。在AJAX成功返回的回調函數中，我們使用`URL.createObjectURL()`方法將Blob對象轉換為圖片URL，并將其賦值給圖片的`src`屬性。這樣，圖片就會在后臺進行異步加載，并在加載完成后顯示在頁面上。

除了上述例子，我們還可以運用AJAX異步加載具有交互性的圖片。例如，在一個簡單的畫廊應用中，用戶可以點擊不同的縮略圖，然后異步加載對應的大圖進行展示。

下面是一個示例代碼：

<div id="thumbnailContainer">
<img class="thumbnail" data-src="thumbnail1.jpg" alt="Thumbnail 1">
<img class="thumbnail" data-src="thumbnail2.jpg" alt="Thumbnail 2">
<img class="thumbnail" data-src="thumbnail3.jpg" alt="Thumbnail 3">
</div>
<div id="galleryContainer">
<img id="galleryImage" alt="">
</div>

var thumbnailContainer = document.getElementById('thumbnailContainer');
var thumbnails = thumbnailContainer.getElementsByClassName('thumbnail');
var galleryImage = document.getElementById('galleryImage');
for (var i = 0; i< thumbnails.length; i++) {
var thumbnail = thumbnails[i];
thumbnail.addEventListener('click', function() {
var src = this.getAttribute('data-src');
var xhr = new XMLHttpRequest();
xhr.open('GET', src, true);
xhr.responseType = 'blob';
xhr.onload = function() {
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(this.response);
galleryImage.src = imageUrl;
};
xhr.send();
});
}

在上述代碼中，我們首先獲取了包含縮略圖的容器，并獲取到每個縮略圖。然后，我們為每個縮略圖添加了一個點擊事件監聽器，在點擊縮略圖時，根據其`data-src`屬性獲取大圖的URL。接下來，我們使用AJAX異步加載大圖，并在加載完成后將其顯示在一個用于展示大圖的容器中。

通過使用AJAX實現異步加載圖片，我們可以提升網頁的加載速度，并提供更好的用戶體驗。無論是加載靜態圖片還是具有交互性的圖片，AJAX都是一個強大的工具，可以幫助我們實現這些功能。