Проблемы с производительностью 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="images/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="images/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="images/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="images/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, работает лучше.


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