jQuery AJAX 載入指示器：點擊「更多」顯示 Loading 圖並無縫替換內容

核心模式

<div id="load-more" class="btn">查看更多 >></div>

$('#load-more').click(function() {
    var $btn = $(this);
    $btn.html('<img src="/img/loading.gif" height="24">'); // 1. 顯示 loading
    $btn.load('/api/more-items', function() {          // 2. 載入片段並替換自身內容
        // 3. 完成後自動恢復 (load 成功會用回應 HTML 覆蓋 loading 圖)
    });
});

關鍵點

• .load(url) 會發起 GET 請求，並將回應 HTML **直接替換** 目標元素的 innerHTML。
• 無需手動清除 loading 圖，伺服器回傳的正常按鈕/列表 HTML 會自然覆蓋。
• 錯誤處理：.load(url, function(resp, status) { if(status==='error') $btn.html('載入失敗，點擊重試'); })。

進階：分頁無限滾動

$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
        $('#load-more').trigger('click');
    }
});

結論：善用 .load() 簡化「觸發→載入→替換」流程，碼少錯少。