Vue Carousel: изображение во вложенном div загружается медленнее, чем в родительском. - PullRequest
Новая
       104

Vue Carousel: изображение во вложенном div загружается медленнее, чем в родительском.

0 голосов
/ 23 сентября 2019

Я построил простую карусель Vue, которая состоит из двух элементов: .container div и .inner div, вложенных в него.Последний имеет фоновое изображение.Проблема заключается в том, что при загрузке следующего слайда это фоновое изображение занимает много времени для загрузки.Когда я посещаю слайд во второй раз, задержки вообще нет.

Кроме того, проблема не существует, когда я устанавливаю одно и то же фоновое изображение для родительского div (.container) вместо (.inner).Почему это происходит и есть ли решение для этого?

Я прилагаю два jsfiddles - один с рабочей каруселью и другой с сломанной каруселью. 

<div id="app">
  <button @click="nextBackground">Next</button>
  <ul>
    <transition-group name="slide">
      <li class="container" v-for="(background, index) in backgrounds" key="`background${index}`" v-show="index == current">
        <div class="inner" :style="{ backgroundImage: 'url(' + background.url + ')' }"></div>
        <div class="text">Ukończyła wrocławski AWF ze specjalizacją "Promocja Zdrowia". Posiada licencje instruktorskie ćwiczeń siłowych, BASIC FITNESS, pływania, narciarstwa, snowboardu. Jest certyfikowanym instruktorem LES MILLS – programów BODYPUMP i BODYCOMBAT. Specjalizuję się w treningu funkcjonalnym, to jest to co uwielbia! W jej edukacji trenerskiej nigdy nie było jednej najważniejszej rzeczy. Wyznaje zasadę, że życie polega na ciągłej nauce, a najlepszym nauczycielem jest doświadczenie.
        </div>
      </li>
    </transition-group>
  </ul>
</div>

new Vue({
  el: "#app",
  data: {
    backgrounds: [
        { url: 'https://firebasestorage.googleapis.com/v0/b/hesgym-96c8e.appspot.com/o/lukasz_sliwa.jpg?alt=media&token=1eb2f138-8a7d-48e3-a2ab-2ba662fe167a' },
      { url: 'https://firebasestorage.googleapis.com/v0/b/hesgym-96c8e.appspot.com/o/dominika_hrycaj.jpg?alt=media&token=87090366-fc14-48fa-8f26-abd16beeecbf'},
      { url: 'https://firebasestorage.googleapis.com/v0/b/hesgym-96c8e.appspot.com/o/agata_rudnicka.jpg?alt=media&token=b16f8ebc-4bb8-41d1-9528-549cee20dfd6'}
    ],
    showContainer: false,
    current: 0
  },
  methods: {
    nextBackground() {
        this.current++
      if (this.current == this.backgrounds.length) {
        this.current = 0;
      }
    }
  }
})

body {
  margin: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.container {
  height: 100vh;
  width: 100%;
  background-size: cover;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.inner {
  height: 100%;
  width: 50%;
  background-size: cover;
  background-position: center;
}

.text {
  width: 50%;
}

.slide-enter-active {
  animation: slide-in 0.3s;
}

.slide-leave-active {
  animation: slide-out 0.3s;
  position: absolute;
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slide-out {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

рабочий: https://jsfiddle.net/LSliwa/zt29bw1f/ сломанный: https://jsfiddle.net/LSliwa/v8uef92t/

...