анимации jQuery изменчивы и заикаются в Firefox

Question

анимации jQuery изменчивы и заикаются в Firefox

Мне нравится думать, что я не макет, но я не могу заставить свой jQuery горизонтальный слайд-шоу анимировать гладко особенно в FireFox (на Mac). У кого-либо есть совет?

Анимация делается как так:

$('#lookbook').stop().animate({left: -((lookbook-1)*825)+'px'}, { duration: 800, complete: cap_fade(1)});

Ссылка в качестве примера:

http://mayfourteenth.com/w/lookbook?preview=1

8

javascript jquery firefox jquery-animate slideshow

задан Millions 3 May 2010 в 22:27

3 ответа

Другие вопросы по тегам:

javascript jquery firefox jquery-animate slideshow

Похожие вопросы:

score 3 · Answer 1

В Chrome анимация выглядит гладкой. Однако я считаю, что есть несколько вещей, которые вы можете сделать для улучшения плавности:

Во-первых, можно заранее загрузить все изображения, как вы делаете здесь (вверху). Однако отображение их всех сразу, как в «Ссылка на пример» , ухудшает производительность, поскольку все они анимируются одновременно:

<div id="lookbook"> 
    <div><img src="/q_images/lib/lookbook/1.jpg"></div> 
    <div><img src="/q_images/lib/lookbook/2.jpg"></div> 
    ...
    <div><img src="/q_images/lib/lookbook/15.jpg"></div> 
</div>

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

Другие вещи, которые могут немного улучшить производительность, - это такие вещи, как следующее:

Используйте изображения меньшего размера (по пикселям и / или размеру файла).
Сделайте незначительную оптимизацию кода, заранее вычислив что-то.
Используйте автономную библиотеку анимации вместо jQuery.

score 7 · Answer 2

Я тестировал Firefox, Chrome (dev) и Safari в Windows, и анимация заикается во всех браузерах (но больше в FF).

Чтобы повысить производительность JavaScript, вы можете избавиться от всех вызовов getElementById или $ ("div # mydividentyfier"). Если вы сохраните их в переменных, они будут кешированы. Пример: Это может немного повысить производительность:

var lookbook = $('#lookbook');
var look_caption = $('#look_caption');
if (lookbook.length) {    
    lookbook.width(lookbook).width()*$('#lookbook img').length)
    if (look_caption) {
        look_caption.html(lookcaps[0]);
        look_caption.fadeIn();
    }

Вместо:

if ($('#lookbook').length) {    
    $('#lookbook').width($('#lookbook').width()*$('#lookbook img').length)
    if ($('#look_caption')) {
        $('#look_caption').html(lookcaps[0]);
        $('#look_caption').fadeIn();
    }

Я также рекомендовал бы использовать URI данных для изображений, так как это уменьшает количество httpRequests, которые вы должны сделать для получения страницы загружен.

score 2 · Answer 3

Вы также можете использовать это

.animate({left:'-=825'}); //next
//and
.animate({left:'+=825'}); //previous

вместо

.animate({left: -((lookbook-1)*825)+'px'});