JavaScript:如何按顺序显示 GIF，避免预加载

javascript: how to show gifs sequantially, avoiding preload

本文关键字：加载 GIF 显示 何按 顺序 JavaScript      更新时间：2023-09-26

我有一个网页，我想按顺序显示五个动画 gif;我的意思是 gif2 只有在 gif1 结束动画时才必须出现并开始动画。我尝试了以下代码，但它有一个奇怪的行为，因为在 FF 和 Chrome 上，大多数时候它都可以按照我想要的方式运行，但有时 gif 会按顺序出现，但它们的动画已经结束。但是，在IE中，它永远不会像我想要的那样运行，似乎有一个图像"预加载"功能。动画花了大约 1 秒。你可以帮我吗？谢谢

<script>
$(document).ready(function() {
$('#gif1').css('visibility','visible').hide().delay(100).fadeIn(400);
$('#gif2').css('visibility','visible').hide().delay(500).fadeIn(400);
$('#gif3').css('visibility','visible').hide().delay(1000).fadeIn(400);
$('#gif4').css('visibility','visible').hide().delay(1500).fadeIn(400);
$('#gif5').css('visibility','visible').hide().delay(2000).fadeIn(400);
});
</script>

也许这会有所帮助：

$(document).ready(function() {
   $('#gif1').css('visibility','visible').hide().delay(1000).fadeIn(400, function() {
      $('#gif2').css('visibility','visible').hide().delay(5000).fadeIn(400);
   });
});

小提琴

相关文章：