Как заставить функцию JavaScript использовать меньше памяти (поворот изображения в фоновом режиме) - PullRequest
Новая
       2

Как заставить функцию JavaScript использовать меньше памяти (поворот изображения в фоновом режиме)

1 голос
/ 09 апреля 2011

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

function changeAngle() {
            setAngle = setInterval(bgrotate,50);
        }

        function bgrotate(){
            i+=0.1;
            var sCSS= ("rotate(" + i + "deg)");
            $("#starfield").css({ '-moz-transform': sCSS, '-o-transform': sCSS, '-webkit-transform': sCSS });
        }

Размер вращающегося изображения составляет 610 КБ.

Это работает очень хорошо, но я заметил, что вентилятор на моей машине действительно нагревается, когда я запускаю страницу. Я проверил монитор активности и процессор работает примерно на 85%.

Кто-нибудь есть идеи, как я могу немного упростить это, чтобы уменьшить загрузку процессора? Если вам нужно, я могу выложить демо-версию страницы, чтобы увидеть, как она работает.

Спасибо, мельница,

T

ОБНОВЛЕНИЕ: Демо-версия этой страницы доступна здесь: http://tady.me/rbg

ЗАКЛЮЧИТЕЛЬНЫЙ ВОПРОС ОБ ЭТОМ: Привет, ребята, мне может понадобиться начать новый вопрос, но на случай, если кто-то из тех, кто помогал изначально, может сказать мне, любую идею, почему это не будет работать в Safari (Mac + PC ) или Firefox (только для ПК)?

Приветствия

T

Ответы [ 3 ]

3 голосов
/ 09 апреля 2011

Вы должны попытаться сделать это с помощью CSS (используя свойства синхронизации перехода или анимации), а не с помощью JavaScript.

https://developer.mozilla.org/en/css/css_transitions

Demo (webkit) :http://jsfiddle.net/E9J77/2/

К сожалению, Firefox по-прежнему не поддерживает CSS-анимации.

Вот обходной путь для Firefox с использованием события transitionend:

Demo (Firefox) : http://jsfiddle.net/VZhnh/3/

0 голосов
/ 09 апреля 2011

Я бы предложил немного увеличить интервал, но также увеличить расстояние, которое дает каждое вращение.

Я бы также предложил сохранить #starfield в глобальной переменной, чтобы уменьшить доступ к DOM

(конечно, переходы работают только в Firefox, Safari и я думаю, что Chrome)

0 голосов
/ 09 апреля 2011

Интересная техника - я тоже хочу посмотреть демо.Вы пробовали 100 мс и вращаете .2degs?

...