Question

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

现在，我想对常规链接也使用相同的throbber，这意味着当我点击一个链接并且它需要服务器超过3秒才能响应时，会显示出悸动者。

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

如何让Firefox在加载时播放GIF-Animation？

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何时就绪。

使用Prototype：

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中不再存在此问题

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

2 个答案: