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

【问题标题】：Show GIF-Animation after page request in Firefox在 Firefox 中页面请求后显示 GIF 动画
【发布时间】：2011-10-04 09:28:11
【问题描述】：

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

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

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

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

【问题讨论】：

你说在firefox下不行，是不是说在其他浏览器上也行？
该应用程序仅在少数公司使用，所有用户都使用firefox。所以，我通常不会在其他浏览器中进行测试。在您发表评论后，我使用 Chrome 进行了测试，并且可以正常工作。
我认为这与：this quesion有关。所以我想没有办法让firefox播放动画
你试过我的脚本了吗？
是的，但没用（见我的评论）

标签： javascript firefox animated-gif

【解决方案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

【讨论】：

嘿，我不确定，如果这真的回答了我的问题......request_manager.addEventListener('open', [this, this.requestOpened]); 是否意味着当我尝试离开页面时调用了你的 throbber-version（因此打开一个新网页）还是仅用于 ajax 请求？
说真的，请重新阅读问题。我不需要一个普通的 throbber，我已经有一个。只有当我尝试离开页面时显示此 throbber 时才会遇到问题在。

【解决方案2】：

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

【讨论】：