JQuery - 如何在加載div中的內容時顯示微調器？

Question

我有一個導航欄，裏面有一些鏈接。點擊任何鏈接時，它會從導航欄旁邊的div中的對應html頁面加載內容。由於加載內容可能需要幾秒鐘，我試圖在加載內容時顯示微調。下面是一個示例代碼我曾嘗試：

$('.nav_link').click(function(e) { 
    $('.div_content').html(''); 

    var link = $(this); 
    setTimeout(function() { 
     $(".div_content").load(link.attr('ref')); 
    }, 1000); 

    $('.spinner').show(); // show Loading Div 

    setTimeout(function() { 
     $('.spinner').hide(); // hide loading div 
    },1500); 
}); 

上面的代碼顯示旋轉器和它開始轉動，那麼它停止並凍結，直到該內容被加載。微調器然後消失，內容顯得很好。而不是這個凍結微調，我需要讓它保持旋轉，直到內容完全加載。

Here is a full code example in plnkr

有什麼建議？

Answer 1

我終於找到了一個有趣的解決方案來解決我的問題。使用GIF微調器圖像將在加載div中的html內容時凍結，因此我使用了一個css創建的微調器，該微調器能夠平穩地工作而不會凍結。它可以按照解釋here來創建。