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上非常慢 - 修复？

回答

相关问题