IE8 上的 jQuery 动画非常慢 - 修复？答案

【问题标题】：jQuery animate VERY slow on IE8 - Fix?IE8 上的 jQuery 动画非常慢 - 修复？
【发布时间】：2013-08-23 09:08:05
【问题描述】：

我正在处理的网站有一个横幅/底部条带，当用户向下滚动页面时加载它，并在他们向上滚动时再次隐藏。我添加了一些逻辑，以便在浏览器不支持 CSS3 转换 (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'});

【问题讨论】：

是滞后还是太慢了？如果它很慢，只需将动画时间从 300 更改为 150 或其他东西
我认为问题在于 DGS 突出显示，每次用户滚动时都会触发动画。

标签： jquery performance css internet-explorer-8 jquery-animate

【解决方案1】：

Scroll 不仅在滚动结束时被触发，而且在整个过程中也被触发。这意味着您在进行滚动时要为 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);
         }
      }
   });
}

【讨论】：

太棒了。谢谢，非常有帮助且解释清楚！

【解决方案2】：

Ie8 现在是一个旧的浏览器，所以我认为你想要动画你将不得不妥协。我建议删除 ie 上的动画，并在页面使用 ie 特定样式表加载后立即显示横幅

【讨论】：

这不是我的选择，我为英国最大的时装零售商之一工作，他们需要一定的规格。说“这不能做”不是一个真正的选择！我们 8% 的客户仍在使用 IE8，因此我们必须迎合他们。