2

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

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

http://docs.jquery.com/Ajax_Events

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

我可以使用一分钟延迟，例如：

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

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

4

3 回答 3

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 兽人灼烧者

于 2012-10-21T07:27:40.090 回答
0

从您链接到的页面，只需绑定到ajaxStartand 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');
于 2012-10-21T07:37:08.517 回答
0

好的，我尝试了这个（Fiddle Here），希望是您正在寻找的。

基本上：

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

来自关于.load() 事件的jQuery 站点：

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

所以它应该适用于你的惰性内容。

希望能帮助到你！

于 2012-10-21T08:55:59.857 回答