为什么 JavaScript 执行会影响 Firefox 中的 css 动画和动画 gif

Question

对我来说

，当我处理数据的异步加载（例如带有javascript的图像）时，总是会出现一个大问题。过去，我放置了一个加载器来向用户显示某些事情正在进行中。但是在加载数据时，图像将无法正确动画化。它一直在反转，但仅在Firefox浏览器中。

同样的问题也适用于css3动画，例如旋转。

为什么会这样？

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

制作了一个带有ajaxloader图像（动画gif）和css旋转动画的jsfiddle。可以测试的地方。

Answer 1

您需要在

样式表中添加transalte3d（0，0，0），以便启动硬件加速渲染：

例如，尝试：

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

translate3d（） 属性告诉浏览器使用硬件加速以获得更流畅的动画

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

此外，我以默认值指定比例，以便浏览器不会继承任何其他比例..因为我们希望比例的默认值为 1.. 正常大小

如果浏览器支持，将 Z 添加到 0.1 将启动硬件加速

试试看