1

我创建了一个网页，它有 7 个六个部分，带有巨大的背景图像，使用background-size: cover;. 它在除 Google Chrome（所有版本/所有平台）之外的所有浏览器中都能正常工作。当我尝试在谷歌浏览器中滚动页面或单击其链接（他们也使用 $.scrollTo 滚动页面）时，页面会变得不稳定和滞后，并且滚动缓慢并使用 100% 的 CPU。

我已经上传了这个页面，所以你可以测试它：http ://baaemail.com/beta （我稍后会删除这个页面）。甚至 IE9/10 也很好，但 chrome 变得不稳定。

该页面绑定了几个“滚动”事件，我尝试完全禁用 javascript，但它并没有变得更好，所以它不是来自滚动事件。

我正在使用background-size: cover它，因为它完全按照我想要的方式塑造照片，并且我希望修复图像，这就是为什么我不能使用其他方法，比如使用img标签而不是背景。

我应该怎么办？谢谢。

4

1 回答 1

0

我为自己找到的一个具有类似行为的网站的解决方案是background-repeat:no-repeat为那些包含巨大背景图像的 div 添加 css 属性。

您还可以检查您是否有重复的背景图像body，html对我来说，最大的问题是重复的图案图像严重干扰了 google chrome 的滚动性能。

此外，如果您在这些“幻灯片”上使用 CSS 过渡，您应该检查那些没有分配给“全部”。如果您仅对“左”属性进行转换，则将其分配给“全部”是没有意义的。

我不确定仅此一项是否会对您有所帮助，但压缩图像和脚本始终是一个好习惯。

这东西对我有用。希望能帮助到你。

于 2013-02-05T14:22:24.327 回答