简单的淡入淡出总是滞后

Question

当我选择显示此图片时，我在页面上的所有动画都遇到问题。我尝试用fadeIn，visibility，animate：opacity，display：block显示它，无论我揭示它的哪种方式仍然导致浏览器窒息。必须有办法解决这个问题。 （我也试过预加载图像，没有区别！） 它只是图像的大小吗？

http://jsfiddle.net/ZJpmT/2/

Answer 1

我怀疑是图像尺寸。进行快速测试表明，可以显示持续时间为5秒的淡入淡出，但使用1秒的持续时间根本不会显示任何淡入淡出效果，只是立即显示图像。

动画大小为1MB的图像并不是您想要做的。如果您确实需要此图像那么大，请尝试为每个帧添加背景，该背景与页面背景匹配并将其另存为JPG。这可能会减小一些尺寸，但不能保证它会阻止浏览器窒息。