简单的淡入淡出总是滞后

Question

当我选择显示此图片时，我遇到了页面上所有动画滞后的问题。我试过用淡入淡出、可见性、动画：不透明度、显示：块来显示它，无论我以哪种方式显示它仍然会导致浏览器阻塞。必须有办法解决这个问题。 （我也尝试过预加载图像，但没有任何区别！） 只是图片的大小吗？

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

Answer 1

我怀疑是图像大小。做一个快速测试，可以显示一个持续时间为 5 秒的淡入淡出，但使用 1 秒的持续时间根本不会显示任何淡入淡出效果，而是一次显示图像。

动画大小为 1MB 的图像不是您想要做的。如果您确实需要此图像那么大，请尝试为每个框架添加一个背景，以匹配页面背景并将其保存为 JPG。这可能会稍微减小大小，但不能保证它会阻止浏览器阻塞。