在 Firefox 中请求页面后显示 GIF 动画

Question

我有一个简单的 throbber，当 ajax 请求持续超过 3 秒时会自动显示。该 throbber 主要由动画 GIF 图像组成。

现在，我想对常规链接也使用相同的 throbber，这意味着当我单击链接并且服务器需要超过 3 秒的时间来响应时，会显示 throbber。

不幸的是，Firefox 在“重新加载”网页时似乎无法播放动画。 javascript 被调用并使 throbber 正确淡入，但它不旋转。

如何让 Firefox 在加载时播放 GIF 动画？

Answer 1

这是函数：

// Throbber manager
function Throbber() { }
Throbber.prototype = {
    image : null,
    requests : 0,

    requestOpened : function(event) {
        if (this.requests == 0) {
            this.image.src = 'throbber.gif';
        }
        this.requests++;
    },

    requestLoaded : function(event) {
        this.requests--;
        if (this.requests == 0) {
            this.image.src = 'throbber_stopped.gif';
        }
    },

    clicked : function() {
        request_manager.abortAll();
    },

    // Called on window load
    attach : function() {
        this.image = document.getElementById('throbber');
        if (this.image && request_manager) {
            request_manager.addEventListener('open', [this, this.requestOpened]);
            request_manager.addEventListener('load', [this, this.requestLoaded]);
            request_manager.addEventListener('abort', [this, this.requestLoaded]);
            this.image.onclick = function() { Throbber.prototype.clicked.apply(throbber, arguments); };
        }
    }
}
var throbber = new Throbber();
window.addEventListener('load', function() { Throbber.prototype.attach.apply(throbber, arguments); }, false);

function SimpleDemo() { }
SimpleDemo.prototype = {
    // The AjaxRequest object
    request : null,

    // Setup and send the request
    run : function() {
        this.request = request_manager.createAjaxRequest();
        this.request.get = {
            one : 1,
            two : 2
        };
        this.request.addEventListener('load', [this, this.ran]);
        this.request.open('GET', 'xml.php');
        var req = requests[this.request.id];
        return setTimeout(function() { req.send(); }, 5000);
    },

    // Triggered when the response returns
    ran : function(event) {
        alert(event.request.xhr.responseText);
    }
}

如果您使用 jQuery：

$("#throbber").show();
/* Your AJAX calls */
$("#throbber").hide();

在调用所有 Ajax 内容之前检查 DOM 何时准备就绪。

使用原型：

document.observe("dom:loaded", function() {
  //your code
});

使用 jQuery：

$(document).ready(function() {
      //your code
});

或参考此：http://plugins.jquery.com/project/throbber

Answer 2

我刚刚尝试了我的旧代码，发现这个问题在 Firefox 10.0.2 中不再存在