performance - 简单的淡入淡出总是滞后

Question

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

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

Answer 1

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

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