功能启动时，加载Spinner图像的速度过快

Question

I have a function that displays contents of a posts when clicked on. I want the loading spinner to display and delay for few sections before the post content appears. The issue here is when I click on each post, the spinner appears for maybe 1ms and in some cases it disappears long before the content appears.

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

gif image always behave differently on every device..basically it depends upon device's processing speed. so better option is to use image sprites and animate it with javascript.. In your case at page load there is nothing processing..but as page starts to load device's processor cant handle the load and as a result your gif image gets slower

Answer 2

It seems from your last commented line that you are using a timeout to hide the loader. Instead You should handle the hiding inside the callback function of your ajax request, so that loader hides after request is completed, not after a fixed amount of time:

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

Try this:

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

    });

}