口吃背景图片IE

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

这会在Chrome和Firefox中创建流畅的视差滚动效果，但不会在Internet Explorer中创建。在IE中（无论哪个版本），这种影响会造成很大的影响（可以在前面提到的链接中看到）。

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

<div style='height:1000px;background-color:#333;position:relative;' id='page1'> 

    <img src='images/bg1.png' alt='' style='display:inline;position:absolute;top:-60px;left:0px;width:100%;z-index:0;' class='background' /> 

</div>

这是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+windowHeight))&&((page1+1000) >= scrollTop)){ 
      newOffset = -60 + ((scrollTop - page1)*0.8); 
      $('#page1 .background').css('top',newOffset); 
     } 
});

不知怎的，IE似乎落后于处理图像的这个位置并应用它。有没有人有如何让IE浏览器具有与Chrome或Firefox类似的平滑滚动效果？

由于提前，

的Jeroen

编辑：

好了，我对我的方式来寻找解决方案！

我试过background-attachment：fixed，它没有导致IE中出现口吃。然后我想，这个CSS可以与视差效果相结合。 IE中的转换在导致口吃方面存在差距，所以也许我可以使用background-attachment：fixed来连接它们。

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

这是代码（HTML）：

<div style='height:1000px;background-color:#333;position:relative;text-align:center;' id='page1'> 

    <div class='background' style='display:inline;position:absolute;top:-60px;left:0px;height:1000px;width:2000px;z-index:0;background-image:url(images/bg1.png);background-repeat:no-repeat;background-position:left -60px;background-attachment:fixed;'></div> 

</div>

这是相关的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+windowHeight))&&((page1+1000) >= scrollTop)){ 
      newOffset = "left "+ (-60 - ((scrollTop - page1)*0.2))+"px"; 
      $('#page1 .background').css('background-position',newOffset); 
     } 
});

来源

2013-01-08 Jeroen

这是因为IE浏览器的javascript渲染引擎是，从技术上说，废话。除了对自己的代码进行优化之外，我不认为有很多可以做的事情。 –

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

来源

2013-01-08 16:12:31 Blaise

那么，这似乎很合法..但它没有工作... IE仍然口吃..我想我找到了解决方案..我将它与background-attachment：固定。未完待续！ – Jeroen

口吃背景图片IE

回答

相关问题