为什么JavaScript执行会影响FireFox中的CSS动画和GIF动画

Question

There's a big question for me which always comes on when I work on asynchronous loading of data eg an image with javascript. In the past I placed a loader to show the user that something is in progress. But at the time the data is loading the image won't animate properly. It's bucking all the time but only in Firefox Browser.

Same problem is with css3 animations eg a rotation.

Why is that happening?

var imgUrl = 'http://photojournal.jpl.nasa.gov/jpeg/PIA13932.jpg';
var aImagesToLoad = [];
var iLoaded = 0;
var runs = 3;

$(document).on('click', 'a#init-load', function(event) {
    event.preventDefault();
    if (confirm('A big image is loaded three times now')) {
        var i, j;
        var self = $(this);

        self.fadeOut(500);  
        $('img').addClass('show');

        for ( i = 0; i < runs; i += 1) {
            var ts = new Date().getTime();

            aImagesToLoad.push(new Image());
            aImagesToLoad[aImagesToLoad.length - 1].onload = function(load) {
                iLoaded += 1;

                if (iLoaded === runs - 1) {
                    $('img').removeClass('show');
                    self.fadeIn(500);
                }
             };

             aImagesToLoad[aImagesToLoad.length - 1].src = imgUrl + '?uq=' + (ts + i);
         }
    }
});

Made a jsfiddle with an ajaxloader image (animated gif) and a css rotation animation. Where it can be tested.

Answer 1

you neeed to add transalte3d(0,0,0) in your stylesheet so it kick in hardware acceleration rendering:

for example try:

transform: scale(1) rotate(359deg) translate3d(0,0,0.1);

the translate3d() property tells the browser to use hardware acceleration for smoother animation

#css-ajaxloader {
    transform: scale(1) rotate(0deg) translate3d(0,0,0.1);
} 

also i specify the scale at its default so the browser does not inherit any other scale.. since we want the scale at its default value of 1 .. normal size

adding Z to 0.1 will kick in hardware acceleration if the browser supports it

try that