Производительность анимации jQuery с Mobile Safari - PullRequest
Новая
       35

Производительность анимации jQuery с Mobile Safari

3 голосов
/ 25 октября 2011

Я только недавно начал разработку сайта для iPhone с использованием jQTouch, и у меня есть следующий код: 

<li class="title" onclick="showDesc('desc1');">Post Title</li>
   <li id="desc1" class="shortDesc">
      Short description of post content
      <a href="#viewPost">Read</a> 
   </li>

<script type="text/css>
function showDesc(id){
    $("#"+id).slideToggle();
}
</script>

«desc1» скрыто в CSS и отображается, когда пользователь щелкает заголовок сообщения (я просто работаю над макетом, поэтому аргумент, переданный showDesc (), в настоящий момент жестко запрограммирован)

Моя проблема в том, что при просмотре его на самом iPhone анимация невероятно медленная и заикающаяся. Он отлично работает в настольных браузерах (очевидно!) И на симуляторе iPhone, просто на самом устройстве (под управлением iOS 4.3.2).

У меня такой вопрос: это проблема с моим кодом или jQuery не был оптимизирован для Mobile Safari?

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

Или же эта задача лучше подходит для анимации CSS3?

Заранее спасибо!

Ответы [ 3 ]

1 голос
/ 26 октября 2011

Да, настоятельно рекомендуется использовать переходы CSS3. Они аппаратно ускорены, а анимации Javascript - нет. Вы хотели бы изменить непрозрачность, а также параметры ширины / высоты для анимации slideToggle. Это неприятно, но дает отличную производительность

0 голосов
/ 26 октября 2011

Оказывается, что многие проблемы с рендерингом на самом телефоне были вызваны свойством webkit-box-shadow, применяемым к скрытому

Хотя CSS3 гораздо более "родной"Опция для этой задачи, функция jQuery slideToggle (), кажется, работает отлично.

Мне действительно следовало бы дать более подробный обзор CSS, но теперь я узнал больше об CSS3-анимации, основываясь на вашей рекомендации, поэтому оно того стоило!

0 голосов
/ 26 октября 2011

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

...