使用jQuery延迟显示ajax加载gif

Question

什么是延迟显示ajax-loader gif的最佳方法.当我点击按钮时,加载器gif显示并隐藏即使所花费的时间是几百毫秒,这也会给浏览器带来一种闪烁.我想要的是说只显示gif,如果完成ajax请求需要超过1000毫秒.

 <script type="text/javascript">
     $(document).ready(function() {
         $('#loader').hide();
         $('#btnGetPeople').click(function() {
            $('#loader').show();
             $.getJSON("/User/GetName/10",
                null,
                function(data) { showPerson(data); });
         });
     });

     function showPerson(data) {
         alert(data);
         $('#loader').hide();
     }
</script>

我的装载机div包含....

<div id="loader"><img alt="" src="/content/ajax-loader.gif" /></div>

实现这一目标的最佳技术是什么？

Answer 1

正如您所看到的,我添加了一个延迟,延迟显示300毫秒.如果ajax更快,则在加载器真正显示之前取消超时.

<script type="text/javascript">
    var showLoader;
    $(document).ready(function() {
        $('#loader').hide();
        $('#btnGetPeople').click(function() {
            // only show loader if ajax request lasts longer then 300 ms
            showLoader = setTimeout("$('#loader').show()", 300);
            $.getJSON("/User/GetName/10",
                null,
                function(data) { showPerson(data); });
        });
    });

    function showPerson(data) {
        clearTimeout(showLoader);
        alert(data);
        $('#loader').hide();
    }
</script>

Answer 2

这是一种有趣的方式.替换$loader.show()为:

$("#loader").data('timeout', window.setTimeout(function(){ $("#loader").show()}, 1000));

你的隐藏命令:

window.clearTimeout($("#loader").hide().data('timeout'));