功能啟動時，加載Spinner圖像的速度過快

Question

我有一個功能，當單擊時顯示帖子的內容。 我希望加載微調器在帖子內容出現之前顯示並延遲幾個部分。 這里的問題是，當我單擊每個帖子時，微調框可能會顯示1毫秒，在某些情況下，它會在內容出現前很長時間消失。

function showPost(id) {
    setTimeout(function() {$('#loader').show();},1);
    $('#pcontent').empty();
    $.getJSON('http://howtodeployit.com/category/daily-devotion/?json=get_post&post_id=' + id + '&callback=?', function(data) {
    var $postcon = $('<div/>').append([$("<h3>", {html: data.post.title}),$("<p>", {html: data.post.content})]);
        $postcon.appendTo('#pcontent');
    });
}

微調HTML：

<div id='loader'><img src="css/images/loader.gif"/></div> 

Answer 1

gif圖像在每個設備上的行為總是不同的。基本上，它取決於設備的處理速度。 所以更好的選擇是使用圖像精靈並用javascript進行動畫處理。.在頁面加載時，沒有任何處理..但是隨着頁面開始加載，設備的處理器無法處理加載，結果您的gif圖像變慢了

Answer 2

從您的最后一條評論行看來，您正在使用超時來隱藏加載程序。 相反，您應該處理ajax請求的回調函數內部的隱藏，以便加載程序在請求完成后隱藏，而不是在固定的時間后隱藏：

function showPost(id) {
    $('#loader').show();
    $('#pcontent').empty();
    $.getJSON('http://howtodeployit.com/category/daily-devotion/?json=get_post&post_id=' + id + '&callback=?', function(data) {
        $('#loader').hide();
        var $postcon = $('<div/>').append([$("<h3>", {html: data.post.title}),$("<p>", {html: data.post.content})]);
        $postcon.appendTo('#pcontent');
    });
}

Answer 3

嘗試這個：

function showPost(id) {

    $('#loader').show();
    $('#pcontent').empty();

    $.ajax({
        url: 'http://howtodeployit.com/category/daily-devotion/?json=get_post&post_id=' + id + '&callback=?',
        dataType: 'json',
        success: function (data) {
            var $postcon = $('<div/>').append([$("<h3>", {
                html: data.post.title
            }), $("<p>", {
                html: data.post.content
            })]);
            $postcon.appendTo('#pcontent');
            $('#loader').hide();
        }

    });

}