CODEWITHSUNDEEP
javascriptfirefoxanimated-gif
Thorben Croisé
Thorben Croisé

Reputation: 12870

Show GIF-Animation after page request in Firefox

I have a simple throbber, that is automatically shown when an ajax request lasts longer than 3 seconds. This throbber consists mainly of an animated GIF-Image.

Now, I want to use the same throbber also for regular links, meaning that when I click a link and it takes the server more than 3 seconds to respond, the throbber is shown.

Unfortunately, it seems that firefox is unable to play the animation, while it is "reloading" the webpage. The javascript is called and fades the throbber correctly in, but is it not spinning.

How can I make firefox play the GIF-Animation while it is loading?

Upvotes: 0

Views: 984

Answers (2)

Thorben Croisé
Thorben Croisé

Reputation: 12870

I just tried my old code and found out that this issue does not exist anymore in Firefox 10.0.2

Upvotes: 0

linguini
linguini

Reputation: 1939

This is the function:

// 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);
    }
}

If you use jQuery:

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

Check to see when the DOM is ready before calling all your Ajax stuff.

using Prototype:

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

using jQuery:

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

Or Refer this: http://plugins.jquery.com/project/throbber

Upvotes: 1

Related Questions