1

我正在编写一个脚本，但 Chrome 有问题。

这就是我正在做的事情： 1. 将大图像加载到 DIV 中。2. 缩放图像以适合 DIV 的大小。3. 浏览器调整大小时，图片随浏览器放大缩小。

在除 Chrome 之外的所有浏览器中，一切都 100% 运行。

我检查了 Chrome 中的分析器，没有发现任何异常。这些是大图像，但是在所有其他浏览器中都可以正常工作（甚至是实时图像）。

在 Chrome 中使用缩小尺寸的图像时，我读过很多地方都注意到了这个问题……但不是解决方案。

没什么特别的，只是使用

var img=new Image();
$(img).load(function(){ .... {);

有谁知道可以在 Chrome 中使用的解决方法或解决方案？谢谢！

4

4 回答 4

3

我有完全相同的问题，但最近解决了它。巨大的性能占用了 chrome 的抗锯齿功能，因为它会在您调整图像大小时重新计算整个图像。

因此，要解决它，您只需将此行添加到 css 中，如果您的图像：

#myImage
{
     image-rendering: -webkit-optimize-contrast;
}

当图像静止时，您可以通过 javascript 将其关闭。

有关抗锯齿的更多信息：缩放图像时禁用抗锯齿

于 2014-12-23T10:48:13.097 回答
3

因此，Chrome 在处理大图像甚至不是大但只是按比例缩小的图像时似乎很糟糕。我无休止地四处搜索，只是为了找到没有解决方案的类似问题。

仍然不确定为什么所有其他浏览器（甚至 IE 7 和 8）都可以处理大图像（使用 7mb 缩小的 PNG 进行测试），但 Chrome 甚至无法在不滞后的情况下制作 700kb 的缩小 JPG。

所以，我要回答这个问题：在这种情况下，Chrome 很烂。

于 2013-04-18T16:11:31.380 回答
0

你是如何调整图像大小的？使用高度/宽度或 CSS 转换？后者可能会带来更好的性能。

一些信息： 提高 HTML5 应用程序的性能

于 2013-04-18T00:14:22.773 回答
0

当您在 Chrome 中分析图像大小调整和解码问题时，最好使用开发者工具时间线，因为它可以为您提供相对准确的统计数据，准确了解需要很长时间才能解码的内容。

缩小（或重新调整大小）涉及 Chrome 必须解码您发送的图像（JPEG/PNG/GIF），然后做额外的工作来将该图像调整到您想要显示的容器（div）中在可能的情况下，Chrome 团队的建议是将您的图像预缩放到所需的正确宽度/高度。

现在您可能想知道：嗯，这个问题肯定只是桌面 Chrome 很烂，对吧？它没有那么明确。特别是在浏览器无法访问强大的 GPU/CPU 的移动设备上，在那里执行这些调整大小操作的成本也会很高。简而言之：是的，有时在 Chrome 中重新缩放大图像可能会很慢。尝试在可能的情况下进行预缩放，这些性能瓶颈应该会消失。

于 2014-01-01T19:54:32.967 回答