1

我有一个功能,点击时会显示帖子的内容。我希望加载微调器在帖子内容出现之前显示并延迟几个部分。这里的问题是,当我单击每个帖子时,微调器可能会出现 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> 
4

3 回答 3

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

    });

}
于 2013-10-25T07:42:20.540 回答
0

从您最后评论的行看来,您正在使用超时来隐藏加载程序。相反,您应该处理 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');
    });
}
于 2013-10-25T07:39:25.603 回答
0

gif 图像在每个设备上的行为总是不同的。基本上它取决于设备的处理速度。所以更好的选择是使用图像精灵并使用javascript对其进行动画处理。在您的页面加载情况下,没有任何处理..但是随着页面开始加载设备的处理器无法处理负载,因此您的gif图像变慢

于 2013-10-25T07:33:17.103 回答