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專用）

回答

相關問題