在Chrome中创建具有大背景图像和不良性能的部分

时间:2012-12-13 15:50:32

标签: javascript css google-chrome scroll parallax

我有一个单页网站,我添加了一些设置了大背景图像的部分。我希望它们具有“固定”效果,因此当用户滚动时它们不会移动。所以我使用了background-size: cover;background-attachment: fixed。这样做了。然而,问题是它在Chrome中非常滞后,我认为chrome不会缓存图像或其他东西。你可以在这里测试一下:

http://jsfiddle.net/sallar/rwyfZ/1/

它不像其他浏览器那样流畅。所以我尝试使用图像(在这种情况下使用$ .backstretch)。使用这种方法,滚动延迟是固定的,滚动非常顺利,但它没有我想要的“固定”效果。所以我认为我应该使用视差效果。但是我所尝试的视差插件或方法都没有在“图像”上做得很好,它们都针对背景图像进行了优化,因为Chrome中的问题我无法使用它。

以下是Backstretch示例的演示:

http://jsfiddle.net/sallar/FX4Cn/1/

那么,我该怎样做才能使它们具有固定的风格并使页面像第二个例子一样平滑滚动? 提前谢谢。

1 个答案:

答案 0 :(得分:0)

我看不出任何重大区别,只是第二个没有确定。

我认为你的“问题”是Chrome滚动的步骤,Firefox和Opera不会(我真的不知道其他的atm)。下次你可以试着谷歌“平滑滚动铬”,看看这个“问题”中的一个问题和解决方案。

理论上可以用Javascript做到这一点,但是我找不到任何有用/有用的例子atm。