(JQuery/Javascript) Event Handle - Lose Focus

Question

вот мой вопрос, я разрабатываю персональный веб-сайт с огромной анимацией в фоновом режиме, с облаками, движущимися в бесконечном цикле. Все делается с помощью jquery, расширенного с помощью jquery timers и sprites. | Сначала он заполняет матрицу исходного положения облака (случайный) | он устанавливает фактическое положение каждого облака. | начните перемещать облака с помощью функции .animate() и запустите таймер, чтобы снова запустить эту анимацию, пока облака не достигнут левой границы. | повторить навсегда :)

В любом случае этот метод потребляют «мало» память и процессор, я пытаюсь оптимизировать код, и мне было интересно, если есть метод для вызова функции, когда переключатель браузера к другая страница, чтобы остановить анимацию.

Спасибо.

Плюс, если кто-то поможет в оптимизации кода, я буду так благодарен! :) Я отправлю ссылку на сайт, если кто-нибудь сможет с этим помочь. Еще раз спасибо

Answer 1

Во-первых, убедитесь, что вы анимировать одного DOM-элемент, а не кучу отдельных облаков. Поместите свои облака в контейнер и переместите его.

Во-вторых, взгляните на CSS3 transitions. Это много более плавный (с ускорением GPU), чем анимация на основе JavaScript. Кроме того, супер-легко учиться и использовать. Просто опишите класс CSS и добавьте его в свои облака при начальной настройке позиции.

Что касается определения, если вкладка браузера в фоновом режиме, requestAnimationFrame, используется JQuery в анимации бегущей строки, который является 60 FPS тикер, может сделать это для вас автоматически.

---

Это не появится, JQuery больше не используя requestAnimationFrame (они used to в какой-то момент, но затем удалить его). Итак, вот an animate function с использованием requestAnimationFrame (с помощью обложки setTimeout) вы можете украсть идеи (или просто захватить функцию).

Answer 2

Вы можете слушать окна blur и focus событий:

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

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