В Firefox анимация jQuery прерывистая и заикающаяся

Question

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

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

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

Пример ссылки:

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

Answer 1

Я тестировал в Firefox, Chrome (dev) и Safari для окон и анимацию заикалась во всех браузерах (но больше в 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, которые вы должны сделать, чтобы загрузить страницу.

Answer 2

Анимация в 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> 

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

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

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

Answer 3

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

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

Вместо

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