加載更多小圓圈是一種常見的用戶體驗優化方法，它可以在用戶瀏覽網頁內容時，通過AJAX技術實現異步加載更多的數據，并在加載過程中顯示小圓圈，給予用戶一個視覺上的反饋。這種交互方式不僅可以提高用戶體驗，還可以減少用戶等待的時間，提升網頁的整體性能。 舉個例子來說明，假設我們查看的是一個新聞列表頁面。傳統的方式是使用分頁加載，在用戶瀏覽到頁面底部時，需要點擊翻頁按鈕或者滾動到頁面底部才能加載下一頁內容。而使用加載更多小圓圈的方式，則可以實現無縫加載下一頁的新聞內容，用戶只需要滾動頁面，新聞會無縫地連續加載，而不需要翻頁或者等待過長的加載時間。 下面是一段使用AJAX技術加載更多小圓圈的示例代碼：

var currentPage = 1;
var isLoading = false;
$(window).scroll(function() {
// 判斷滾動條是否到達頁面底部
if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
// 判斷是否正在加載中
if (isLoading) {
return;
}
isLoading = true;
showLoadingIndicator(); // 顯示加載中的小圓圈
// 使用AJAX請求下一頁的數據
$.ajax({
url: "news.php",
data: {page: currentPage + 1},
success: function(data) {
// 將新聞內容添加到頁面中
$("#newsList").append(data);
hideLoadingIndicator(); // 隱藏加載中的小圓圈
isLoading = false;
currentPage++;
}
});
}
});
function showLoadingIndicator() {
// 顯示加載中的小圓圈的代碼
$("#loadingIndicator").show();
}
function hideLoadingIndicator() {
// 隱藏加載中的小圓圈的代碼
$("#loadingIndicator").hide();
}

在上面的代碼中，首先定義了一個變量currentPage來表示當前加載的頁面數，isLoading表示是否正在加載中。然后在瀏覽器滾動事件中，判斷是否滾動到了頁面底部，如果是，則判斷是否正在加載中，如果正在加載中，則不進行任何操作；否則，將isLoading設置為true并顯示加載中的小圓圈，同時使用AJAX請求下一頁的數據，并將返回的新聞內容添加到頁面中。 當AJAX請求成功后，在回調函數中，將新聞內容添加到頁面中，并隱藏加載中的小圓圈，然后將isLoading設置為false，并增加currentPage的值。 這種加載更多小圓圈的交互方式不僅可以應用在新聞列表頁面，還可以應用在商品列表、圖片列表等需要分頁加載的頁面中。它的優點在于用戶無需額外的點擊操作，可以流暢地進行瀏覽，提供了良好的用戶體驗。 總之，通過使用AJAX加載更多小圓圈的交互方式，可以有效改善用戶體驗，減少等待時間，提升整體性能。無論是在新聞列表、商品列表還是圖片列表等頁面中都可以應用這種交互方式，提供更流暢的瀏覽體驗。