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 回答