代码之家  ›  专栏  ›  技术社区  ›  user5623896726

jQuery在IE8上动画非常慢-修复?

  •  0
  • user5623896726  · 技术社区  · 11 年前

    我正在开发的网站有一个横幅/底部条带,当用户向下滚动页面时会加载,当他们向上滚动时会再次隐藏。我添加了一些逻辑,以便在浏览器不支持CSS3转换(IE8-)时提供故障保护。 然而,我在IE8上使用的jQuery故障保护非常慢,我认为这是一个动画调用。有什么建议吗?

             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'});
    
    2 回复  |  直到 11 年前
        1
  •  2
  •   DGS    11 年前

    滚动不仅在滚动结束时触发,而且在滚动过程中也会触发。这意味着在滚动时,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
  •  -1
  •   Braders    11 年前

    Ie8现在是一个旧浏览器,所以我认为如果你想要动画,你就必须妥协。我建议删除ie上的动画,并在页面加载特定于ie的样式表后立即显示横幅