javascript - 为什么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);
         }
    }
});

做了一个jsfiddle带有 ajaxloader 图像(动画 gif)和 css 旋转动画。在哪里可以测试。

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 将在浏览器支持的情况下启动硬件加速

试试看