[英]Why does javascript execution affect css animation and animated gif in firefox
对我来说,有一个大问题总是在我异步加载数据(例如,带有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 。 在哪里可以测试。
您需要在样式表中添加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将提高硬件加速
试试看
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.