口吃背景圖片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

回答

相關問題