Оптимизация анимации Jquery для одностраничного веб-сайта

Question

Недавно мне было поручено создать HTML-управляемую веб-страницу, которая будет эмулировать базовые переходы Flash и анимацию, что, естественно, заставило меня обратиться к jquery. На сайте есть четыре разные страницы, каждая со своим конкретным фоном и небольшим абзацем текста.

Легко? Видимо, не так для меня. Когда я запустил интерактивный макет для утверждения, я столкнулся с проблемой вялой анимации, характерной только для (удивление, удивление) компьютеров Mac с мониторами выше 18 ". ПК, на которых я тестировал, отлично работал во всех основных браузерах - Chrome, IE9 и FF. Для Mac выше 18 ", однако, это был FF, который работал лучше всего, в то время как остальное было ужасно.

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

К сожалению, ничего не сработало.

Это одностраничная настройка, которая может быть одним из основных факторов, способствующих медлительности, но она не объясняет, почему она отлично работает на ПК и компьютерах с диагональю 18 дюймов.

В любом случае, вот фрагменты моих кодов для анимации, чтобы добавить элементы при загрузке и перейти между страницами / разделами:

$(document).ready(function(){

$("#home-button").click(function(){
    $("#home").fadeTo(2000, 1);
    $("#location").fadeTo(2000, 0);
    $("#services").fadeTo(2000, 0);
    $("#contact").fadeTo(2000, 0);
    $("#bg-img-1").fadeTo(2000, 0);
    $("#bg-img-2").fadeTo(2000, 0);
    $("#bg-img-3").fadeTo(2000, 0);
    $("#bg-img-4").fadeTo(2000, 1);});

$("#location-button").click(function(){
    $("#home").fadeTo(2000, 0);
    $("#location").fadeTo(2000, 1);
    $("#services").fadeTo(2000, 0);
    $("#contact").fadeTo(2000, 0);
    $("#bg-img-1").fadeTo(2000, 0);
    $("#bg-img-2").fadeTo(2000, 1);
    $("#bg-img-3").fadeTo(2000, 0);
    $("#bg-img-4").fadeTo(2000, 0);});

$("#services-button").click(function(){
    $("#home").fadeTo(2000, 0);
    $("#location").fadeTo(2000, 0);
    $("#services").fadeTo(2000, 1);
    $("#contact").fadeTo(2000, 0);
    $("#bg-img-1").fadeTo(2000, 0);
    $("#bg-img-2").fadeTo(2000, 0);
    $("#bg-img-3").fadeTo(2000, 1);
    $("#bg-img-4").fadeTo(2000, 0);});

$("#contact-button").click(function(){
    $("#home").fadeTo(2000, 0);
    $("#location").fadeTo(2000, 0);
    $("#services").fadeTo(2000, 0);
    $("#contact").fadeTo(2000, 1);
    $("#bg-img-1").fadeTo(2000, 1);
    $("#bg-img-2").fadeTo(2000, 0);
    $("#bg-img-3").fadeTo(2000, 0);
    $("#bg-img-4").fadeTo(2000, 0);});});

Вот мои CSS-стили для фонового изображения и некоторых графических элементов, размер и размер которых необходимо изменить в соответствии с размером браузера:

img.bg{
    min-height: 100%;
    min-width: 900px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index:-4;}

#bg-img-1,#bg-img-2, #bg-img-3, #bg-img-4{
opacity:0;}

img.d-4{
min-height: 100%;
min-width: 1024px;
width: 92%;
height: auto;
position: fixed;
top:0;
left:0;
z-index:-3;
opacity:0.3;}

img.d-5{
min-height: 100%;
min-width: 1024px;
width: 92%;
height: auto;
position: fixed;
margin-left:-50px;
z-index:-3;}

Любая помощь или мнения о том, как оптимизировать это дальше и предотвратить вялые проблемы, очень ценится.

Спасибо, ребята! :)

Answer 1

Ну, вы не можете многое сделать для оптимизации самого процесса анимации (если вы не хотите изменять сам jQuery).Что вы можете сделать, это минимизировать вызовы функций конструктора jQuery:

$("#home-button").click(function(){
    $("#homem, #bg-img-4").fadeTo(2000, 1);
    $("#location, #services, #contact, #bg-img-1, #bg-img-2, #bg-img-3").fadeTo(2000, 0);
});

Однако это не повлияет на саму анимацию.Убедитесь, что вы используете последнюю версию jQuery, чтобы он мог вызывать requestAnimationFrame, что, вероятно, решит некоторые ваши проблемы.

Если это не поможет оживить более свободно, вы, вероятно, можете анимировать в последовательность , которая отнимает время обработки.Может выглядеть так:

$("#home-button").click(function(){
  (function _loop( nodelist ) {
      $( nodelist.shift() ).fadeTo( 2000, 0, function() {
          _loop( nodelist );
      });
  }( ["#location", "#services", "#contact", "#bg-img-1", "#bg-img-2", "#bg-img-3"] ));
});

Пример : http://jsfiddle.net/FEYMQ/

Answer 2

Эта оптимизация создаст меньше объектов jQuery, поэтому должна увидеть прирост производительности, и я не уверен, но помещение всех анимаций в один вызов функции, вероятно, также приведет к увеличению производительности в анимации.

$("#contact-button").click(function(){
    $("#home, #location, #services, #bg-img-2, #bg-img-3,#bg-img-4").fadeTo(2000, 0);
    $("#contact, #bg-img-1").fadeTo(2000, 1);
});

Answer 3

Спасибо за совет, Энди и Билли Мун. Это - некоторые замечательные методы, которые я невольно не выполнил при наборе кодов.

Переходы страниц теперь хороши во всех браузерах, потому что медлительность можно наблюдать только под пристальным вниманием; невооруженным глазом это более или менее приемлемо.

Я думаю, что мне нужно в первую очередь извиниться перед всеми, потому что я пропустил очень важный фрагмент кода, который, как я понял, вызывает большую часть проблемы. Большая проблема здесь, когда у меня есть 2 графика с идентификаторами - # md4 и # md5 - скользя слева и постепенно исчезая, это начинает становиться действительно рывком. Анимация происходит только один раз: при входе на домашнюю страницу. JQuery для анимации:

$(document).ready(function(){
$('#md4').fadeTo(2000, 1);
$('#md5').animate({left: "50px" }, 1800);
$('.home').fadeTo(2000, 0.8);
$('#bg-img-4').fadeTo(900, 1);
$('#menu').fadeTo(2000, 1);
$('#copyright').fadeTo(2000, 1);});

Обратите также внимание, что две графики, упомянутые с идентификаторами # md4 и # md5, были стилизованы для подгонки, обрезки и растяжения пропорционально размеру браузера. Вот коды, которые я предоставил ранее, но хочу вставить их снова, чтобы не запутаться:

#md4, #md5{
min-height: 100%;
min-width: 1024px;
width: 92%;
height: auto;
position: fixed;
top:0;
left:0;
z-index:-3;
opacity:0.3;}

Как уже упоминалось ранее, я попытался решить эту проблему, создав страницу index.html для загрузки всех изображений в кэш перед переходом на домашнюю страницу и загрузки всех анимаций jquery. Теоретически, это должно немного снизить нагрузку на обработку, но производительность по-прежнему очень низкая на компьютерах Mac с экранами выше 18 ", независимо от браузеров, но с FF версии 4, которая является лучшей. Проблема также встречаются на экранах Mac ниже 18 ", но изолированы только для FF версии 4 и ниже.

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

Таким образом, главный вопрос здесь: учитывая все заявленные параметры (графика и деления исчезают одновременно при загрузке страницы), что я могу сделать для оптимизации анимации во всех последних основных браузерах и таких размерах экрана, как что будет минимальная медлительность.

Большое спасибо заранее, ребята. Ценю всю помощь, оказанную так далеко от всего сердца.