Question

我已经为我的动态网站加载了“animation.gif”。这是我在jquery中使用的代码，用于显示和隐藏微调器：

$("#loading").bind("ajaxSend", function(){
   $(this).show();
 }).bind("ajaxComplete", function(){
   $(this).hide();
 });

http://docs.jquery.com/Ajax_Events

我的问题： 该网站有不同的内容（如flash，图像，文本等）。因此，网站的某些部分需要更长时间才能加载其他部分。但是加载动画的持续时间总是相同的（它太快了）。当我使用flash（4mb）和html文本加载内容时，微调器隐藏得太快，内容仍在加载。与HQ图像相同..

我可以使用最小延迟，例如：

$("#this").delay(600).fadeOut("slow");

但我不认为这是一个很好的解决方案。 在整个内容加载之前，如何才能隐藏加载微调器？

Answer 1

您可以为页面中的所有缓慢加载元素创建标记列表。

然后开始听每个元素加载事件（你也可以用flash做）。

每次加载一个元素时都会抬起它的标志。

在后台运行一个监视此列表的间隔，一旦引发所有列表项，删除加载微调器。

你也可以试试这个：

var iv = setInterval(function () {
    if (document.all["theObject"].readyState == 4) {
        clearInterval(iv)
        alert("Object loaded (maybe).")
    }
}, 100)

取自：http://www.webdeveloper.com/forum/showthread.php?160792-lt-object-onload，

by Orc Scorcher

Answer 2

从您链接到的页面，只需绑定到ajaxStart和ajaxStop，它具有内置所需的逻辑，并且只触发任何组中的第一个AJAX请求，并且最后一个AJAX请求完成。

或者，您可以使用自己的计数器来确定未完成的AJAX请求数量：

(function(sel) {
    var count = 0;

    $(sel).bind("ajaxSend", function() {
        if (count++ === 0) {
            $(this).show();
        }
    }).bind("ajaxComplete", function() {
        if (--count === 0) {
            $(this).hide();
        }
    });
})('#loading');

Answer 3

好的，我尝试了this one (Fiddle Here)，希望是你正在寻找的。

基本上：

为您希望加载程序等待.content类
用你的jQuery / AJAX动态设置内容src
将$('.content')元素绑定到.load()事件
当.load()被解雇时，会增加一个计数器，如果计数器等于.length选择器的$('.content')，则隐藏加载gif

从jQuery Site关于.load() event：

此事件可以发送到与URL关联的任何元素：图像，脚本，框架，iframe和窗口对象。

所以它应该适用于您的懒惰内容。

希望它有所帮助！

如何根据加载的内容设置“加载微调器”的持续时间

3 个答案: