0

我正在制作一个首页画廊，该画廊有几个图像，通过 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%，但仍不完美。好吧，谢谢大家的帮助，希望这可以帮助那里的人。

4

1 回答 1

0

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

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

-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. 
}
于 2012-01-09T19:19:07.373 回答