SetTimeout在Firefox中的调用之间滞后？
SetTimeout在Firefox中的调用之间滞后？
提问于 2018-09-20 07:06:31
我正在尝试优化我的代码，以便我可以快速有效地在启动页面上循环浏览图像。我在chrome和safari上看起来非常流畅但是当我在移动设备和firefox上查看启动页面时，它会让人大吃一惊
可以在http://theotherchrisrock.com上找到演示
我很想听听你如何解决这个问题的意见。这是相关的代码：
var i = 0
var j = 0
var l = $('.se-pre-con > div').length - 2;
var $pre_con = $('.se-pre-con');
var $di_sum = $('.splash-image:last-child');
var $img_array = [];
for (t = 0; t < l; t++) {
$img_array[t] = $('.splash-image-' + t);
}
function flashanimation() {
if (i < l) {
$img_array[i].addClass('flash');
i++;
flashloop();
} else if (j != 1) {
$di_sum.addClass('di-some');
j = 1
flashloop();
} else {
$pre_con.addClass('nun');
}
}
function flashloop() {
setTimeout(function() {
flashanimation();
}, 300)
}
$(".blinker").removeClass("blinker");
flashloop();
基本上，目标是使图像显示150毫秒然后消失150毫秒然后出现下一个图像，依此类推，最后只有一个黑色div。现在我正在为每个触发此关键帧动画的div添加一个类〜
.splash-image.flash {
-webkit-animation:flash 0.15s linear;
animation:flash 0.15s linear;
-webkit-animation-delay:0.15s;
animation-delay:0.15s;
display:block;
opacity:0;
}
@-webkit-keyframes flash {
0% {
opacity:0;
}
1% {
opacity: 1;
}
100% {
opacity:1;
}
}
@keyframes flash {
0% {
opacity:0;
}
1% {
opacity: 1;
}
100% {
opacity:1;
}
}
我很想听听你的意见。感谢您审核我的问题
回答 1
Stack Overflow用户
发布于 2018-09-20 16:10:30
我刚刚在笔记本电脑上加载了网站：Chrome，笔记本电脑：Firefox和iPhone：Safari，我没有注意到任何延迟。虽然图片移动得非常快，但我可能没有注意到它们之间的区别。尝试使用另一套设备和不同的互联网连接？对我来说一切似乎都很好。
如果您有更多话要告诉我！
谢谢，约瑟夫
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100006150
复制相关文章
相似问题