google-chrome - 调整大小(按比例缩小)图像锯齿状，重绘平滑(不重新加载)

Question

我使用 css 缩小图像，但它的边缘是锯齿状的。但是，如果我快速切换到 chrome 中的另一个选项卡然后返回，它会被正确绘制。我认为这是因为重绘期间发生的事情。有什么方法可以使用 jquery 强制重绘吗？我已尝试添加类、元素和更改其他属性。

Answer 1

好的，多亏了bump，我会在这里添加我的解决方案。真正发生的是我们试图强制重新绘制整个窗口。以下是诀窍:

function reDraw(){
    //hack to redraw the elements on the page to avoid choppy look of resized items
    //prevent reDraw from firing too early
    setTimeout(function(){$('body').hide().show(0)},66);   
}

显示隐藏组合将强制重绘受影响的区域。请注意，显示中的 0 是必需的。使用 66 毫秒延迟是因为在应用样式后立即强制重绘(在本例中为 css 调整大小)将绕过浏览器中的重新计算样式功能。 66ms 是大约。 15fps 所以它应该仍然出现在任何以 30fps 运行的屏幕上瞬间发生(如果一切顺利，它将需要两次屏幕刷新)。在 60fps 的显示器上可以看到从像素化到非像素化的小变化，但有多少人会密切关注？

无论如何，这就是我们的解决方案。对于我们来说，它被用在一个网站上，该网站的构建与视频游戏非常相似，就动画循环和其他方面而言。因为屏幕已经刷新很多，我们发现我们只需要在PNG调整大小后调用reDraw函数，但您的要求可能会有所不同。

请注意，此功能可能会占用大量资源，而且我观察到许多浏览器在此之后需要收集垃圾，因此您可能需要评估实时方面的必要性。谨慎使用。

尽情享受吧!

~技术人员