Использование процессора Jquery

Question

Я использую Jquery, чтобы прокрутить изображение по горизонтали на моей странице. Единственная проблема заключается в том, что он использует значительное количество ресурсов процессора. До 100% на одноядерном ноутбуке в Firefox. Что может вызвать это ???

JQuery

<script>
    jQuery(document).ready(function() {

    $(".speech").animate({backgroundPosition: "-6000px 0px"}, 400000, null);
    });

    </script>

CSS

.speech {
    /*position:fixed;*/
    top:0;
    left:0px;
    height:400px;
    width:100%;
    z-index:-1;
    background:url(/images/speech.png) -300px -500px repeat-x;
    margin-right: auto;
    margin-left: auto;
    position: fixed;
}

HTML

<div class="speech"></div>

Answer 1

Он использует ресурсы процессора, потому что вы просите браузер перерисовывать изображение много раз в секунду в течение длительного периода времени. Это не бесплатно.

Answer 2

В случае, если кто-то ищет решение для высокой загрузки ЦП при использовании анимации jQuery (как я), тогда стоит отметить, что jQuery.fx.interval был добавлен в jQuery 1.4.3, чтобы может контролировать частоту анимации.

Пример использования (установка этого значения на 50-70 сохраняла плавность анимации, и я заметил, что загрузка процессора снизилась примерно до 10-20%):

jQuery.fx.interval = 50;

Answer 3

Лучший способ добиться этого - использовать плагин, например http://www.spritely.net/download/

Answer 4

Если это проблема памяти процессора, вы можете аннулировать результат вызова функции jQuery. Если ваш вызов возвращает объект jQuery, то после вызова вы можете установить для него значение null:

var tmp = $(".speech").animate({backgroundPosition: "-6000px 0px"}, 400000, null);
});
tmp = null;

Примечание. Если это ТОЛЬКО связано с утечкой памяти, то это связано с циклическими ссылками. и установив в ноль, вы можете сломать его.

Попробуйте, я хотел бы узнать результаты, если у вас есть время опубликовать.