在現代web開發中，圖片的加載是網頁性能優化中的一個重要方面。使用ajax異步加載圖片是一種常見的提高頁面性能的方法。通過異步加載，網頁可以先加載其他內容，然后再加載圖片，從而提高用戶體驗。本文將介紹ajax異步加載圖片的原理，并通過舉例說明其實現方式。

什么是ajax異步加載圖片

Ajax（Asynchronous JavaScript and XML）是一種在Web頁面上實現異步加載數據的技術。通過Ajax，網頁能夠在不刷新整個頁面的情況下更新部分內容。而在Web開發中，圖片是頁面中占用帶寬較多的資源之一。因此，通過使用Ajax異步加載圖片，可以讓頁面先加載其他內容，提高頁面加載速度。

實現ajax異步加載圖片

實現ajax異步加載圖片的關鍵在于通過JavaScript動態創建標簽，并設置其src屬性來加載圖片。以下是一種實現方式：

<script>
function loadImages() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var imageUrls = JSON.parse(this.responseText);
for (var i = 0; i < imageUrls.length; i++) {
var img = document.createElement("img");
img.src = imageUrls[i];
document.body.appendChild(img);
}
}
};
xhttp.open("GET", "image_urls.json", true);
xhttp.send();
}
</script>

在上述示例中，我們首先創建了一個XMLHttpRequest對象，并通過其onreadystatechange事件監聽器來處理響應。當請求的狀態為4（表示請求已完成）且響應狀態為200（表示請求成功）時，我們會獲取到包含圖片URL的JSON字符串，并通過JSON.parse函數將其轉換為JavaScript對象。接著，我們通過循環遍歷JSON對象，創建標簽，并設置其src屬性為對應的圖片URL，然后將其添加到網頁的body元素中。

例子：延遲加載圖片

除了一次性加載所有圖片，我們還可以實現延遲加載，在用戶滾動頁面到特定位置時加載圖片。下面是一種實現方式：

<script>
function loadImagesOnScroll() {
var imageUrls = []; // 存儲所有待加載圖片的URL
var images = document.querySelectorAll(".image-to-load");
images.forEach(function(img) {
imageUrls.push(img.dataset.src);
});
function loadVisibleImages() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
var viewportHeight = window.innerHeight;
for (var i = 0; i < imageUrls.length; i++) {
var img = document.createElement("img");
img.src = imageUrls[i];
if (img.getBoundingClientRect().top <= viewportHeight + scrollTop) {
document.body.appendChild(img);
imageUrls.splice(i, 1);
i--;
}
}
}
loadVisibleImages();
window.addEventListener("scroll", loadVisibleImages);
}
</script>

在上述示例中，我們首先定義了一個空數組imageUrls，用于存儲所有待加載圖片的URL。然后，我們通過document.querySelectorAll函數獲取到所有帶有class為"image-to-load"的圖片元素，并將其data-src屬性值作為圖片URL添加到imageUrls數組中。

接著，我們定義了一個loadVisibleImages函數，用于在用戶滾動頁面到可見范圍內時加載圖片。在該函數中，我們首先獲取滾動條距離頁面頂部的距離（scrollTop）以及瀏覽器可視窗口的高度（viewportHeight）。

然后，我們通過循環遍歷imageUrls數組，動態創建標簽，并將其src屬性設置為對應的圖片URL。通過getBoundingClientRect函數獲取到圖片元素相對于瀏覽器窗口的位置，如果圖片的top屬性小于等于滾動條距離頁面頂部的距離加上瀏覽器可視窗口的高度，即可判斷該圖片已進入可見范圍，然后將其添加到網頁的body元素中，并將其從imageUrls數組中移除。

最后，我們調用loadVisibleImages函數來加載初始可見范圍內的圖片，并通過window.addEventListener函數監聽頁面滾動事件，以實現滾動時動態加載圖片的效果。

總結

通過ajax異步加載圖片是一種提高網頁性能的常用方法。可以一次性加載所有圖片，也可以實現延遲加載，在用戶滾動頁面到特定位置時加載圖片。通過動態創建標簽，并設置其src屬性來加載圖片，我們可以有效地提高頁面加載速度和用戶體驗。