jQuery動畫在IE8上非常慢 - 修復？

我正在使用的網站有一個橫幅/底部條，當用戶向下滾動頁面時加載，並且當他們向上滾動時再次隱藏。我添加了一些邏輯，以便在瀏覽器不支持CSS3轉換（IE8-）時具有失敗保險功能。但是，我使用的jQuery故障保護在IE8上非常慢，我認爲這是動畫調用。有什麼建議？jQuery動畫在IE8上非常慢 - 修復？

  var Detect = (function() { 
      var 
      //Add CSS properties to test for 
          props = "transition".split(","), 
      //Browser prefixes 
          CSSprefix = "Webkit,Moz,O,ms,Khtml".split(","), 
          d = document.createElement("detect"), 
          test = [], 
          p, pty; 
      // test prefixed code 
      function TestPrefixes(prop) { 
          var 
              Uprop = prop.charAt(0).toUpperCase() + prop.substr(1), 
              All = (prop + ' ' + CSSprefix.join(Uprop + ' ') + Uprop).split(' '); 
          for (var n = 0, np = All.length; n < np; n++) { 
              if (d.style[All[n]] === "") return true; 
          } 
    return false; 
      } 
      for (p in props) { 
          pty = props[p]; 
          test[pty] = TestPrefixes(pty); 
      } 
      return test; 

      }()); 


if (Detect.transition) { 
     $(function(){ 
$(window).scroll(function() { 
if($(document).scrollTop() > 250) 
{  
$('#carriage-promo').addClass("show"); 
} 
else 
{ 
$('#carriage-promo').removeClass("show"); 
} 
}); 
}) 

} else { 
     $(window).scroll(function() { 
if ($(this).scrollTop() < 250) { 
$("#carriage-promo").animate({ 
    height: 0 
},300); 
} else { 
$("#carriage-promo").animate({ 
    height: '40px' 
},300); 
} 
}); 

} 

    #carriage-promo { 
    background: black; 
    width: 964px; 
    height: 0px; 
    position: fixed; 
    z-index:300; 
    display:none; 
    bottom: 0; 
    overflow:none; 
    text-align: center; 
    -moz-transition:all 0.5s ease-in-out; 
    -o-transition:all 0.5s ease-in-out; 
    transition:all 0.5s ease-in-out; 
    -webkit-transition:all 0.5s ease-in-out; 
} 

#carriage-promo.show { 
    height: 40px; 
    -moz-transition:all 0.5s ease-in-out; 
    -o-transition:all 0.5s ease-in-out; 
    transition:all 0.5s ease-in-out; 
    -webkit-transition:all 0.5s ease-in-out; 
} 

if (vDandT >= 201308190000 && vDandT < 201308220000) { 
       $('#carriage-promo').html('<img alt="" src=" <venda_entmediaadd>/ebiz/<venda_bsref>/resources/images/promos/NEXT2_soon.gif" />') 
         .css({'display':'inline-block'});

來源

2013-08-23 user5623896726

是滯後還是太慢？如果速度很慢，請將動畫時間從「300」更改爲「150」或其他內容 – SmokeyPHP

我認爲問題在於DGS突出顯示時，每次用戶滾動時都會觸發動畫。 – user5623896726

不僅滾動結束，而且滾動結束。這意味着您正在爲jQuery處理滾動時處理大量動畫。這可能是最好取消動畫，如果一個已經啓動或檢查動畫現在開始另一個

else { 
    $(window).scroll(function() { 
     if ($(this).scrollTop() < 250) { 
     if($("#carriage-promo").not(':animated')){ 
      $("#carriage-promo").animate({ 
       height: 0 
      },300); 
     } 
     } else { 
     if($("#carriage-promo").not(':animated')){ 
      $("#carriage-promo").animate({ 
       height: '40px' 
      },300); 
     } 
     } 
    }); 
}

來源

2013-08-23 09:12:36 DGS

太棒了。謝謝，非常有幫助，很好的解釋！ – user5623896726

-1

IE8是一個老瀏覽器之前已經在運行了，所以我想你想製作動畫，你將不得不妥協。我會申請消除ie上的動畫，並且只要頁面加載一個特定的樣式表即可看到橫幅

來源

2013-08-23 09:15:13 Braders

這不是我的選擇，我爲英國最大的時尚零售商之一工作，他們需要一定的規格。說「這不能做」不是一個真正的選擇！ 8％的客戶仍然使用IE8，所以我們必須迎合他們。 – user5623896726

jQuery動畫在IE8上非常慢 - 修復？

回答

相關問題