Ajax 加载器图像：如何设置显示加载器的最短持续时间？答案

【问题标题】：Ajax loader image: How to set a minimum duration during which the loader is shown?Ajax 加载器图像：如何设置显示加载器的最短持续时间？
【发布时间】：2011-02-17 06:42:05
【问题描述】：

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

这是加载器 HTML 的代码

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

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

【问题讨论】：

标签： ajax user-interface jquery

【解决方案1】：

我会使用一个从 2 开始并在 1 秒后以及 ajax 响应进入时递减的计数器。类似以下内容：

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

【讨论】：

这行不通我的朋友。这将允许加载程序最多显示 2 秒，而在生产中加载程序不应该出现，直到 ajax 响应完成。这段代码唯一要做的就是确保加载器的最小显示时间为 1 秒。但是，最长时间应该等于 ajax 请求所花费的时间！不过，感谢您的投入/努力！
@whamsicore 为什么它不起作用？我很确定它会的。 setTimeout 只触发一次——您可能会想到 setInterval，它会一遍又一遍地触发。所以这种方法会做请求的事情：显示加载器，直到 ajax 请求完成，但不少于 1 秒。

【解决方案2】：

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

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

【讨论】：

【解决方案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')
        })
    });

【讨论】：

你能解释一下这是如何工作的吗？ .load 不需要某种 URL 来传递数据吗？（请记住，加载程序的目的是传递数据并检索响应，如果一开始不清楚，请原谅）。顺便说一句，感谢您的输入。
@whamsicore jQuery 中有 2 种类型的加载，请参阅 api.jquery.com/?ns0=1&s=load。我们正在使用加载事件而不是加载文件。您可以在api.jquery.com/load-event 阅读有关加载事件的更多信息。在此示例中，加载函数之间的所有内容仅在将图像附加到容器后才会加载。然后 ajax 或您选择的任何回调方法只会在淡出完成后加载。