在現代網頁中，我們經常會遇到需要加載大量數據或進行復雜計算的情況。為了提高用戶體驗，我們常常會使用 Ajax 技術來異步加載數據，使得頁面更加流暢。然而，由于網絡速度的限制，用戶可能會等待一段時間才能看到待加載數據的展示。為了讓用戶知道數據正在加載中，我們可以使用一個透明的 GIF 圖片來作為加載動畫。本文將介紹如何使用 Ajax 加載中的透明 GIF 圖片，并給出一些實例。

首先，我們需要準備一個透明的 GIF 圖片。這個圖片可以是任何尺寸，但要保證透明背景。以下是一個示例代碼:

<img src="loading.gif" alt="Loading" style="display: none;" />

上述代碼中，我們使用了一個名為 "loading.gif" 的透明 GIF 圖片，并通過設置樣式 "display: none;" 隱藏了它。接下來，我們需要編寫一段 JavaScript 代碼來控制加載動畫何時顯示和隱藏。

function showLoading() {
document.querySelector('img').style.display = 'block';
}
function hideLoading() {
document.querySelector('img').style.display = 'none';
}

在代碼中，我們分別編寫了一個 showLoading 函數和一個 hideLoading 函數，用于顯示和隱藏加載動畫。通過設置樣式 display 的屬性值，我們可以控制透明 GIF 圖片是否顯示或隱藏。

現在，我們可以將這些代碼與 Ajax 請求結合起來使用了。當用戶點擊某個按鈕觸發 Ajax 請求時，我們可以在請求開始時調用 showLoading 函數顯示加載動畫，在請求完成后調用 hideLoading 函數隱藏加載動畫。以下是一個示例代碼:

document.querySelector('button').addEventListener('click', function() {
showLoading();
// 發起 Ajax 請求的代碼
// 請求完成后的回調函數
xhr.onload = function() {
// 請求成功后的處理代碼
hideLoading();
};
// 發起 Ajax 請求的代碼
});

在上述代碼中，我們首先使用了 addEventListener 函數來為按鈕綁定了一個點擊事件。當用戶點擊按鈕時，會觸發執行該事件處理函數。在事件處理函數中，我們首先調用 showLoading 函數顯示加載動畫，然后進行 Ajax 請求。當請求完成后，我們在 onload 回調函數中進行請求成功后的處理，最后調用 hideLoading 函數隱藏加載動畫。

通過使用上述代碼，我們可以實現加載中的透明 GIF 圖片效果。無論是在表單提交、數據加載、甚至是圖片預覽等場景下，用戶都能夠清晰地了解到數據正在加載中。這樣，我們就可以為用戶提供更好的交互體驗。