隨著互聯網的發展，網頁上的圖片逐漸成為了吸引用戶眼球的重要元素之一。然而，在傳統的網頁開發中，圖片的加載速度常常成為一個問題。為了解決這個問題，Ajax（Asynchronous JavaScript and XML）技術應運而生。通過Ajax，我們可以在用戶瀏覽網頁的同時，異步地加載圖片，從而提升用戶體驗。本文將介紹如何使用Ajax獲取圖片并顯示圖片，讓網頁更加豐富和生動。

在使用Ajax獲取圖片之前，我們需要明確一個要點：Ajax只能獲取服務器上的資源，并不能直接從本地文件系統加載圖片。因此，我們需要將圖片上傳到服務器上，并設置一個地址用于獲取圖片。下面是一個示例，說明如何通過Ajax獲取服務器上的圖片：

$.ajax({
url: "https://example.com/image.jpg",
method: "GET",
success: function(response) {
// 圖片獲取成功后的操作
},
error: function(error) {
// 圖片獲取失敗后的操作
}
});

上述代碼通過Ajax的GET請求，向服務器發送獲取圖片的請求。如果服務器返回成功，則執行success函數；如果服務器返回失敗，則執行error函數。在success函數中，我們可以對獲取到的圖片進行操作，例如將其顯示在網頁上：

$.ajax({
url: "https://example.com/image.jpg",
method: "GET",
success: function(response) {
$("#image-container").html("");
},
error: function(error) {
console.log("獲取圖片失敗");
}
});

上述代碼中，我們通過jQuery選擇器將圖片顯示的位置定位到id為"image-container"的元素上，并使用html函數將圖片的標簽插入其中。圖片的src屬性被設置為服務器返回的圖片地址。這樣，在圖片成功獲取后，就可以在網頁上顯示出來了。

需要注意的是，在實際開發中，為了提高網頁的加載速度，我們往往會使用圖片懶加載的技術。圖片懶加載指的是在用戶瀏覽頁面并滾動至圖片位置時，才加載相應的圖片。這可以通過監聽滾動事件來實現：

$(window).scroll(function() {
if(isVisible($("#image-container"))) { // 如果圖片容器可見
$.ajax({
url: "https://example.com/image.jpg",
method: "GET",
success: function(response) {
$("#image-container").html("");
},
error: function(error) {
console.log("獲取圖片失敗");
}
});
}
});
function isVisible(element) {
var windowBottom = $(window).scrollTop() + $(window).height();
var elementTop = element.offset().top;
return (elementTop <= windowBottom);
}

上述代碼中，我們通過scroll事件監聽網頁的滾動。當圖片容器可見時，就執行Ajax請求獲取圖片并顯示。isVisible函數用于判斷圖片容器是否處于用戶可見區域內，如果是則返回true，否則返回false。

通過使用Ajax獲取圖片并顯示圖片，我們可以優化網頁的加載速度，提升用戶體驗。無論是在電商網站中加載商品圖片，還是在新聞網站中加載新聞配圖，都可以通過Ajax實現異步獲取并顯示圖片。希望本文對于你理解和使用Ajax技術來獲取和顯示圖片有所幫助。