#jquery #html #animation
#jquery #HTML #Анимация
Вопрос:
Недавно мне было поручено создать веб-страницу, управляемую HTML, которая будет эмулировать базовые переходы и анимации Flash, что, естественно, заставило меня обратиться к jquery. Веб-сайт состоит из четырех разных страниц, каждая со своим особым фоном и небольшим абзацем текста.
Просто? Очевидно, для меня это не так. Когда я запустил интерактивный макет для утверждения, я столкнулся с проблемой вялой анимации, характерной только для (сюрприз, неожиданность) компьютеров Mac с мониторами выше 18 дюймов. Компьютеры, на которых я запускал свои тесты, отлично работали во всех основных браузерах — Chrome, IE9 и FF. Однако для компьютеров Mac с диагональю выше 18 дюймов именно FF работал лучше всего, в то время как остальные были ужасны.
Я пробовал средства и способы оптимизации кодов jquery и даже прибегал к предварительной загрузке всех изображений в кэш браузера с помощью index.html страница, а затем перенаправление пользователя на фактическую веб-страницу, все в надежде, что время обработки будет меньшим.
К сожалению, ничего не сработало.
Это одностраничная настройка, которая, возможно, является одним из основных факторов, способствующих медлительности, но это не объясняет, почему она отлично работает на ПК и компьютерах Mac с диагональю менее 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;}
Мы высоко ценим любую помощь или мнения о том, как оптимизировать это дальше и предотвратить вялые проблемы.
Спасибо вам, ребята! 🙂
Ответ №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 /
Ответ №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);
});
Ответ №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 и ниже.
Я поиграл с идеей упорядочить анимацию так, чтобы она выполнялась последовательно, а не одновременно, но я колебался отчасти потому, что боялся, что слишком сильно скомпрометирую предполагаемый эффект от всего происходящего одновременно ради небольшого повышения производительности. Некоторые советы по этому поводу также будут очень ценны.
Итак, главный вопрос здесь таков: принимая во внимание все заявленные параметры (графика и divs, одновременно исчезающие при загрузке страницы), что я могу сделать, оптимизируйте анимацию во всех последних основных браузерах и размерах экрана, чтобы была минимальная медлительность.
Заранее большое вам спасибо, ребята. От всего сердца ценю всю оказанную до сих пор помощь.