AJAX（Asynchronous JavaScript and XML）是一種前端技術，可以實現異步加載數據，而不必刷新整個頁面。此文章將討論如何使用AJAX來動態請求數據并加載圖片。使用AJAX來請求圖片能夠提高網頁性能，因為只有在需要時才會加載圖片，而不是一開始就全部加載。

舉個例子，假設我們有一個圖片庫的網頁，在這個頁面上展示了許多圖片的縮略圖。一開始，頁面上只會顯示一部分縮略圖，隨著用戶滾動頁面，更多的縮略圖會在底部動態加載。這種動態加載的方式可以減少網頁打開時的加載時間，提高用戶體驗。

// AJAX 請求數據的代碼示例
function loadImages() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 處理響應數據，將圖片顯示在頁面上
for (var i = 0; i< response.length; i++) {
var img = document.createElement('img');
img.src = response[i].url;
document.getElementById('image-container').appendChild(img);
}
}
};
xhr.open('GET', 'image-data.json', true);
xhr.send();
}

在上面的代碼示例中，我們使用了XMLHttpRequest對象來發送AJAX請求。通過監聽xhr對象的onreadystatechange事件，可以獲得服務器返回的響應。當響應狀態為4（已完成）且狀態碼為200（成功）時，我們將響應數據解析為JSON格式，并將圖片加載到頁面上。

為了實現動態加載圖片，我們可以在頁面上綁定一個滾動事件，并判斷滾動位置是否接近底部。當滾動位置接近底部時，我們就觸發AJAX請求，來獲取更多的圖片數據。

// 頁面滾動事件的代碼示例
window.addEventListener('scroll', function() {
var scrolledHeight = window.pageYOffset + window.innerHeight;
var totalHeight = document.documentElement.scrollHeight;
if (scrolledHeight >= totalHeight - 100) {
loadImages();
}
});

在上面的代碼示例中，我們綁定了頁面的滾動事件，當滾動位置接近頁面底部（這里設置為距離底部100像素），就調用loadImages函數來加載更多的圖片。

通過使用AJAX動態請求數據加載圖片，我們可以優化網頁的加載速度和性能。用戶只需要關注當前可見區域的內容，而不必等待所有圖片都加載完畢。這種方式可以提升用戶體驗，尤其是在移動設備上。

總結起來，AJAX動態請求數據加載圖片是一種有效的優化網頁性能的方法。通過只加載當前需要展示的圖片，減少了網頁打開時的加載時間，提高了用戶體驗。這種方法在圖片庫等需要展示大量圖片的網頁中特別有效。