（Jquery/Javascript）事件句柄 - 失去焦點

這是我的問題，我正在開發一個個人網站，在背景中有一個巨大的動畫，雲在無限循環中移動。所有的事情都是用jQuery擴展了jquery定時器和精靈來完成的。 | 首先填寫雲起始位置矩陣（隨機） | 它設置了每個雲的實際位置。 | 開始使用.animate（）函數移動雲層，並啓動一個定時器以再次觸發該動畫，直到雲層到達左邊界。 | 重複永遠:)（Jquery/Javascript）事件句柄 - 失去焦點

反正這種方法消耗一個「小」的內存和CPU，我試圖優化代碼，我想知道如果有調用函數的方法時，瀏覽器切換到不同頁面，停止動畫。

謝謝。

另外，如果有人會幫助優化代碼，我將非常感激！ :) 我會發布鏈接到網站，如果任何人都可以提供幫助。再次感謝

ScreenShot

來源

2012-02-18 Ivan

首先，確保你的動畫一個單 DOM元素，而不是一堆個人雲。把你的雲放入一個容器並移動後者。

二，看看CSS3 transitions。它們是，比基於JavaScript的動畫更加平滑（GPU加速）。此外，超級簡單的學習和使用。只需描述一個CSS類，並在初始位置設置時將其添加到您的雲中。

作爲用於確定是否瀏覽器標籤是在使用的jQuery動畫股票背景，requestAnimationFrame，~~這是一個60 FPS斷續器，可以做到這一點對你自動。~~

它的出現，jQuery是不再使用（他們used to在某些時候，但後來刪除了）。所以，這裏的an animate function僱用（與IE的setTimeout墊片），你可以竊取想法（或只是抓住功能本身）。

來源

2012-02-18 13:32:33 katspaugh

你可以聽窗口的blur和focus事件：

$(window).on('blur', function() { 
    // window went into background, stop animations here 
    // ... 
}); 

$(window).on('focus', function() { 
    // window became active, start animations here 
    // ... 
});

來源

2012-02-18 13:32:48

（Jquery/Javascript）事件句柄 - 失去焦點

回答

相關問題