Question

我正在使用Jquery来实现Ajax功能，并使用加载器图标向用户指示正在检索数据。但是，我希望用户看到加载器图标至少1秒，即使数据需要少于1秒来检索（如果需要超过1秒，加载器图标应保持整个持续时间。

以下是加载程序HTML的代码

<img id="loader" src="example.com/images/ loader.gif" style="vertical-align: middle; display: none" />

我正在使用Jquery .Ajax函数进行数据处理。

Answer 1

我会使用一个从2开始的计数器，并在1秒后递减，当ajax响应进来时。这些行中的东西：

var counter = 2;
function decrement() {
  if (--counter == 0) {
    $('#loader').hide();
  }
}
setTimeout(decrement, 1000);
$.ajax(..., complete: decrement);

Answer 2

首先，显示加载程序图像。然后使用setTimeout()来启动计时器。当计时器完成时，检查AJAX是否已经完成，如果它已经终止了加载器图像，但是如果它没有，则对加载器图像不做任何操作并设置标志。调用AJAX成功处理程序时，检查标志;如果设置了标志，那么计时器已经完成，成功处理程序可以删除加载器图像;如果未设置标志，则成功处理程序可以让计时器终止加载程序映像。

基本上，你有两个异步任务在运行（超时和AJAX）。最后一个完成杀死加载程序图像。

Answer 3

你走了。请参阅http://jsfiddle.net/B4Cge/

中的实际操作

var loader = '<img id="loader" src="http://tools.patentcalls.com/images/spinner.gif"/>';

    $(loader).appendTo('#container').load(function() {
        $('#container').find('#loader').delay(3000).fadeOut(function() {
            $('#container').append('your ajax content')
        })
    });

Ajax加载器映像：如何设置加载器显示的最小持续时间？

3 个答案: