口吃背景图像IE

我有一个关于用jQuery改变背景位置的问题。 我正在处理的网站（ http://www.jeroenrood.nl/GortzFruit ）有一个滚动动画（滚轮或锚点击），背景中img-tag的顶部位置变化比滚动更慢速度。

这在Chrome和Firefox中创建了流畅的视差滚动效果，但在Internet Explorer中却没有。 在IE中（无论哪个版本），这种效果很多（如前面提到的链接所示）。

这是我使用的代码，涉及视差滚动效果（HTML）：

这是javascript / jQuery代码：

 var page1 = $('#page1').offset().top; var windowHeight = $(window).height(); $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); //if the first page is in the viewport if((page1 = scrollTop)){ newOffset = -60 + ((scrollTop - page1)*0.8); $('#page1 .background').css('top',newOffset); } }); 

不知何故，IE似乎在处理图像的这个位置并应用它时滞后。 有没有人知道如何使IE具有与Chrome或Firefox类似的平滑滚动效果？

提前致谢，

吉荣

---

编辑：

好的，我正在寻找解决方案！

我尝试了背景附件：修复，这不会导致IE中的口吃。 然后我想，嗯，这个css可以与视差效果相结合。 在IE的过渡中存在导致口吃的空白，所以也许我可以用背景附件桥接它们：固定。

这似乎工作！ 现在它甚至是IE中流畅的动画。 即使有大量的背景图像。

这是代码（HTML）：

这是相关的javascript / jQuery代码：

 var page1 = $('#page1').offset().top; var windowHeight = $(window).height(); $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); //if the first page is in the viewport if((page1 = scrollTop)){ newOffset = "left "+ (-60 - ((scrollTop - page1)*0.2))+"px"; $('#page1 .background').css('background-position',newOffset); } }); 

Answer 1

使这个图像更小。 它是2000×2386像素和8.3MB大。 您可以将其设置为1000×1193像素并将其转换为JPEG。 JPEG比PNG更好地压缩照片。 浏览器可以比大图像更快地处理小图像。