Загрузка Spinner Image слишком быстро при запуске функции

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'); 
    }); 
} 

Spinner HTML:

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

Answer 1

Попробуйте это:

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(); 
     } 

    }); 

} 

Answer 2

рисунок всегда ведут себя по-разному на каждом device..basically это зависит от скорости обработки устройства. поэтому лучше использовать графические спрайты и анимировать их с помощью javascript. В вашем случае при загрузке страницы ничего не обрабатывается .. но как страница начинает загружать процессор устройства, не справляется с нагрузкой, и в результате ваше изображение gif становится медленнее

Answer 3

Кажется, что из вашей последней прокомментированной строки вы используете таймаут, чтобы скрыть загрузчик. Вместо этого Вы должны обращаться скрытие внутри функции обратного вызова вашего 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'); 
    }); 
}