JavaScript：处理事件的有效方法（Firefox专用）

我正在运行滚动事件，触发TweenMax动画，而且我注意到，尽管Chrome在外观上很不错，但在Chrome上看起来不错， Firefox浏览器。有没有人有关于如何尽可能有效地处理这个滚动事件的建议？另外，有什么关于Firefox的渲染，我不知道这可能是造成这种情况？任何线索将不胜感激！JavaScript：处理事件的有效方法（Firefox专用）

的要点是我在我的页面上寻找名为“客户”的容器，每个容器包含三个单独的“客户”元素。当匹配“customers”的div滚动到视图中时，触发TweenMax动画，并添加一个名为“animated”的类，以防止元素随后重新动画。

这里是基本论证小提琴： http://jsfiddle.net/epp37jsq/

编辑

为了澄清，小提琴只能证明我的动画功能的行为。由于文件大小非常小，所以滞后不会发生。在实际的网站上，我有11个3个“客户”组。图像是相同的，但拉了33次。将来，图像将是唯一的。实质上，这11组中的每一组都要调用动画。我正在寻找如何提高我的网页速度的建议。

而且我的代码：

var scrollTimer = null; 
    $(window).scroll(function() { 
     if (scrollTimer) { 
      clearTimeout(scrollTimer); // clear any previous pending timer 
     } 
     scrollTimer = setTimeout(handleScroll, 500); // set new timer 
     console.log("fired!"); 
    }); 

    function handleScroll() { 
    scrollTimer = null; 
    $('.customers').each(function() { 
     if (!$(this).hasClass('animated')) { 
     if ($(this).isOnScreen(0.45, 0.45)) { 
      TweenMax.staggerFromTo($(this).find('.customer'), 0.3, { 
       y: 50, 
       opacity: 0 
      }, { 
       y: 0, 
       opacity: 1, 
       ease: Power2.easeOut 
      }, 0.15); 
      $(this).addClass('animated'); 
     } 
     } 
    }); 
    }

来源

2015-10-26 amoeboar

我不能看到你的jsFiddle与FireFox的任何滞后。它似乎与Chrome一样运行。你在什么操作系统上？ –

我正在编辑我的帖子，提到小提琴只演示行为。实际网站在Firefox上滞后。 – amoeboar

你试过了lagSmoothing（）http：// greensock。com/docs /＃/ HTML5/GSAP/TweenMax/static_lagSmoothing/ –

通常使用Firefox，在x或y轴平移可能会导致一些JANK。有时在补间中添加一个轻微的rotation:0.001可以帮助您的补间在Firefox中更平滑。

http://jsfiddle.net/pwkja058/

而且使用GSAP特殊属性的autoAlpha代替opacity可以帮助提高性能

TweenMax.staggerFromTo($(this).find('.customer'), 0.3, { 
    y: 200, 
    rotation:0.01, /* add a slight rotation */ 
    autoAlpha: 0 /* use instead of opacity */ 
}, { 
    y: 0, 
    rotation:0.01, /* add a slight rotation */ 
    autoAlpha: 1, /* use instead of opacity */ 
    ease: Power2.easeOut 
}, 0.15);

autoAlpha是GSAP CSSPlugin的一部分：

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

autoAlpha - 与不透明度相同，只是当值达到0时，可见性属性将设置为“隐藏”以提高浏览器渲染性能并防止目标上的点击/交互。当该值不是0时，可见性将被设置为“继承”。它没有被设置为“可见”以继承继承（想象父元素是隐藏的 - 将子设置为明确可见会导致它显示，当这可能不是预期的）。为方便起见，如果元素的可见性最初设置为“隐藏”且不透明度为1，则它将假定不透明度也应该从0开始。这使得在页面上将事物视为不可见（设置您的CSS可见性：隐藏），然后在任何时候淡入淡出。

来源

2015-12-01 17:53:19

谢谢您的信息！ – amoeboar

JavaScript：处理事件的有效方法（Firefox专用）

回答

相关问题