CSS 缩放图像上的 Javascript 转换表现不佳

Question

我正在开发一个首页图库，其中包含多个图像，通过 CSS 进行缩放以适合页面。

图像从一个到下一个淡出（相互重叠），并且如果用户调整浏览器大小以耗尽空间，图像也会调整大小。

问题在于，图像淡入淡出在大多数浏览器和除最新计算机之外的所有浏览器上表现都很糟糕。

但是，如果图像没有拉伸，那么大多数计算机上的所有浏览器的性能都是完美的。

我之前在设计的其他网站上也遇到过这个问题，并且花费了大量时间研究和测试解决方案，但我似乎找不到任何东西。

有什么想法吗？

---

我已经实现了性能/样式的权衡。我没有任意缩放图像，例如按 0.7543234 倍缩放，而是将其四舍五入为 8 等。我发现任意缩放因子都会带来巨大的性能损失，而使用单个小数缩放会大大降低性能。

这是一些js代码：

var adjustedNewWidth = Math.round((roundNumber( (newWidth / originalImage.width), 1)+0.1)*originalImage.width);

var adjustedNewHeight = Math.round((roundNumber( (newHeight / originalImage.height), 1)+0.1)*originalImage.height);

• newWidth 是所需的宽度，
• originalImage.width 是我的数组，其中 我保留原始图像尺寸 （因为js太聪明了，它无法访问 这些在缩放后），
• roundNumebr 是一个函数， 缩放到最接近的小数位

function roundNumber(num, dec) { var 结果 = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec); 返回结果； }

此后，淡入淡出效果提高了约 50%，但仍然不完美。好吧，感谢您的帮助，希望这对那里的人有所帮助。

Answer 1

由于浏览器缩放和显示信息和图片的方式而导致的性能损失。

尝试将以下内容添加到将缩放的任何内容中：

-ms-interpolation-mode: nearest-neighbor;
image-rendering: optimizeSpeed;

这会在缩放图像时关闭过滤，从而使其在慢速机器上速度更快。

动画完成后，将元素的样式设置为：

-ms-interpolation-mode: bicubic;
image-rendering: optimizeQuality;

另外，舍入脚本在舍入时似乎会大量调用数学，当重复多次时（就像在动画中一样），这会非常慢。您可以通过用这个精简版本替换舍入脚本来减少开销：

var roundNumber = function (num) {
    return ~~(num + .5);
    //this take a number (num), adds .5, then chops off the decimal place. 
}