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 result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec); return result; }

在此之后，褪色效果提高了50％，但仍然不够完美。非常感谢你的帮助，希望每个人都能帮到那里的人。

Answer 1

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

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

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

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

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

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

此外，舍入脚本似乎在舍入时会调用Math，这在重复多次时很慢（如在动画中）。您可以通过使用更精简的版本替换舍入脚本来减少开销：

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

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

1 个答案: