Swiper. js Проблемы производительности с принудительным рефлоу при реагировании - PullRequest
Новая
       14

Swiper. js Проблемы производительности с принудительным рефлоу при реагировании

0 голосов
/ 12 марта 2020

Вопрос по использованию swiper. js Карусель / слайдер галерея. У меня возникают проблемы с производительностью из-за принудительного перекомпоновки, когда слайдер реагирует.

Если размер области просмотра изменяется, то принудительное перекомпонование является экстремальным. Как мне go отладить это?

Swiper github говорит, что это лучшее место для обращения за поддержкой.

Я добавил пример кода здесь.

Codepen 

// Just duplicating swiper 20 times
const listing = document.getElementsByClassName("listing")[0];
for (let i = 0; i < 19; i++) {
  let clone = listing.cloneNode(true);
  clone.getElementsByClassName("swiper-container")[0].id = `carousel-${i+1}`;
  document.getElementsByClassName("grid")[0].appendChild(clone);
  newSwiper(i + 1);
}

function newSwiper(i) {
  let swiper = new Swiper(`#carousel-${i}`, {
    initialSlide: Math.floor(Math.random() * 6),
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }
  });
}
@import url('https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css');

.grid {
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.swiper-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.listing {
  background: orange;
  width: 100%;
  position: relative;
}

.listing::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0;
  padding-bottom: 70%;
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
<div class="grid">
  <div class="listing">

    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://i.imgur.com/8aoOSaob.jpg" alt="thumb">
        </div>
        <div class="swiper-slide">
          <img src="https://i.imgur.com/FB5IGMgb.jpg" alt="thumb">
        </div>
        <div class="swiper-slide">
          <img src="https://i.imgur.com/GBpr1JR.png" alt="thumb">
        </div>
        <div class="swiper-slide">
          <img src="https://i.imgur.com/UYqiudHb.jpg" alt="thumb">
        </div>
        <div class="swiper-slide">
          <img src="https://i.imgur.com/BBFBbuA.jpeg" alt="thumb">
        </div>
        <div class="swiper-slide">
          <img src="https://i.imgur.com/tpZvfRn.jpg" alt="thumb">
        </div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
  </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>

1 Ответ

0 голосов
/ 26 марта 2020

Я потратил слишком много времени, пытаясь решить эту проблему. Играя с css снова и снова. Я пришел к выводу, что это swiper. js. Возможно, как что-то пересчитать где-то.

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

...