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

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

    });

}

在函数开始时加载微调器图像太快

3 个答案: