在現代的網頁設計中，為了提升用戶體驗和頁面加載速度，很多網頁會使用Ajax加載圖片。Ajax加載圖片是指在網頁中使用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);
var images = response.images;
for (var i = 0; i< images.length; i++) {
var img = new Image();
img.src = images[i];
document.getElementById("gallery").appendChild(img);
}
}
};
xhr.open("GET", "images.json", true);
xhr.send();
}

上面的代碼首先創建了一個XMLHttpRequest對象，通過它發送一個HTTP請求到服務器獲取圖片的URL列表。當請求成功返回后，代碼解析服務器返回的JSON數據，然后使用DOM操作動態地創建元素并設置圖片的URL，最后將這些元素添加到id為"gallery"的元素中。

這樣，頁面就實現了動態加載圖片的效果。當用戶滾動頁面或點擊按鈕時，調用loadImages函數即可加載更多的圖片。

值得注意的是，為了避免圖片在加載過程中顯示為缺失的圖標，我們也可以為圖片設置一個loading屬性，告訴瀏覽器在圖片加載完成之前顯示一個占位符。比如：

function loadImages() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var images = response.images;
for (var i = 0; i< images.length; i++) {
var img = new Image();
img.loading = "lazy";
img.src = images[i];
document.getElementById("gallery").appendChild(img);
}
}
};
xhr.open("GET", "images.json", true);
xhr.send();
}

在上述代碼中，我們給每個元素添加了loading屬性，并設置為"lazy"。這樣，瀏覽器在圖片加載完成之前會顯示一個占位符，直到圖片距離可視區域足夠近時才開始加載。

總而言之，使用Ajax加載圖片是提升網頁加載速度和用戶體驗的有效方式。無論是在社交媒體網站還是電子商務網站上，動態加載圖片都可以減少不必要的網絡請求和頁面刷新，從而提升網頁的性能和用戶滿意度。