(Jquery / Javascript) Дескриптор события - потерять фокус

Question

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

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

Спасибо.

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

Answer 1

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

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

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

---

Похоже, jQuery больше не использует requestAnimationFrame (они привык к в какой-то момент, но потом убрал его).Итак, вот анимационная функция , использующая requestAnimationFrame (с setTimeout прокладкой для IE), из которой вы можете украсть идеи (или просто взять саму функцию).

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
    // ...
});