Проблеми с производителността на CSS translate3d на мобилни устройства с голям DOM

Използвам OwlCarousel 1.3.3 на уебсайт, доста подобен на примера за синхронизиране от уебсайта на owl (http://owlgraphic.com/owlcarousel/demos/one.html):

var owlconfig = {
  singleItem: true,
  navigation: false,
  pagination: false,
  afterAction: syncCarousels
};


$('.image-gallery').owlCarousel(owlconfig);

В syncCarousels няма никаква магия и не причинява забавяне, защото все още се случва, когато извадя този метод.

HTML на въртележката (след инициализиране на JS):

<div class="image-gallery owl-carousel owl-theme">
  <div class="owl-wrapper-outer">
    <div class="owl-wrapper">
        <div class="owl-item" style="width: 300px;">
            <a href="/bgimages/image.jpg" class="image-gallery__image">
                <img src="images/image.jpg" alt="Image" itemprop="image">
        <span class="button">
            <span class="btn__inner">Detail</span>
        </span>
            </a>
        </div>
        <div class="owl-item" style="width: 300px;">
            <a href="/bgimages/image.jpg" class="image-gallery__image">
                <img src="images/image.jpg" alt="Image" itemprop="image">
        <span class="button">
            <span class="btn__inner">Detail</span>
        </span>
            </a>
        </div>
        <div class="owl-item" style="width: 300px;">
            <a href="/bgimages/image.jpg" class="image-gallery__image">
                <img src="images/image.jpg" alt="Image" itemprop="image">
        <span class="button">
            <span class="btn__inner">Detail</span>
        </span>
            </a>
        </div>
        <div class="owl-item" style="width: 300px;">
            <a href="/bgimages/image.jpg" class="image-gallery__image">
                <img src="images/image.jpg" alt="Image" itemprop="image">
        <span class="button">
            <span class="btn__inner">Detail</span>
        </span>
            </a>
        </div>
    </div>
</div>

In the desktop version, everything works fine, but if I test it on an iPhone or iPad, the swipe feels extremely laggy. On DragEnd, it stops for like 500ms, before anything happens.

Страницата, където е вградена въртележката, има много различни html маркировки, текст и изображения основно. Ако премахна част от тази маркировка, производителността на owlCarousel се подобрява, но това не е решение.

Как може да се подобри представянето? Събитие опцията "noSupport3d" на owl, която използва jQuery animate, се представя по-добре.


javascript jquery css owl-carousel
person NthDegree    schedule 15.07.2015    source източник
comment
можем ли да имаме jsfiddle за това... за да можем да намерим лесно решение...   -  person answer99    schedule 17.07.2015
comment
Бих искал да предоставя jsfiddle, но не мога да го накарам да работи за съжаление. приложението е доста сложно и когато се опитам да го опростя, за да показва само галерията, проблемът изведнъж изчезва.   -  person NthDegree    schedule 17.07.2015

Отговори (1)


arrow_upward
0
arrow_downward

Добре, разбрах го, ето решението за всички, които се натъкват на подобен проблем:

Голямо количество DOM елементи влияят на производителността на преходите, затова плъзгачът работи перфектно в лека html страница, но имаше проблеми с производителността в по-голяма страница.

Това, което направих сега, за да повиша производителността на моя плъзгач, беше добавянето на transform: translateZ(0px) към родителския елемент на този, който се превежда.

Внимание: Използването на translate3D не прави този код излишен. Сега използвам translate3D за плъзгащия ефект И translateZ(0px) за родителския контейнер на плъзгащия се - това свърши работа.

person NthDegree    schedule 29.07.2015