CSS不透明性能。图像褪色 [英] CSS opacity performance. Image fading

问题描述

我试图淡出我的图片为我的照片库切换。所有这一切都是在JavaScript中完成的，只是改变图像元素的不透明度CSS值。这在一些电脑上真的很迟钝（例如我的笔记本电脑不是很强大，但它是全新的（Asus Eeepc））。

I'm trying to fade in-out my image for my photo gallery switching. All it's done in JavaScript which simply changes the opacity CSS value of the image element. This is really laggy (slow) on some computers - for example my laptop which isn't extremely powerful, but it's brand new (Asus Eeepc).

有反正我可以解决这个性能问题。我看过Canvas动画和HTML5的演示应用到图像，他们在我的笔记本电脑上很流​​畅。我不知道我是否可以对我的图像衰落功能应用相同的东西。

I was wondering if there's anyway I can fix this performance issue. I've seen demos of Canvas animation and HTML5 applied to images and they're really smooth on my laptop. I wonder if I can apply the same thing to my image fading feature.

任何想法？

推荐答案

我很快把一个使用画布标记： http://jsfiddle.net/6wmrd/12/（仅在Chrome和Firefox中测试）

I quickly threw together an example of an image fading away using the canvas tag as requested: http://jsfiddle.net/6wmrd/12/ (Only tested in Chrome and Firefox)

我不确定是否有任何性能提升，但这里至少是一个非常简单的例子可以做到。还应该注意，这是在5分钟内完成的，所以代码可以改进和优化。

I´m not sure if there is any performance gain though, but here is at least a very simple example of how it can be done. It should also be noted that this was done in 5 min so the code can be improved and optimized.

否则，从我的经验，如果你有一个坚实的背景后面图像，我发现有时更平滑的褪色图像上与背景颜色相同的元素。

Otherwise, from my experience, if you have a solid background behind the image, I have found that it is sometimes smoother to fade an element over the image with the same color as the background.

其他可以提高性能的方法可以是减少FPS。如果我没有误解MooTools有50 FPS作为标准。然而，降低FPS可能会影响感知的性能。

Other ways you can improve performance could be to reduce FPS. If I´m not mistaken MooTools has 50 FPS as standard. However, reducing the FPS might influence the perceived performance.

这篇关于CSS不透明性能。图像褪色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！