0

Имеется следующий код на jquery

window.onload = function(){
   $('#preloader').fadeOut('slow', function() {});
};

Элемент выполнил таким образом:

<transition name="fade">
    <div id="preloader" v-if="show">
        <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
    </div>
</transition>

Javascript:

var preloader = new Vue({
    el: '#preloader',
    data: {
        show: true
    }
});

Как настроить исчезновение элемента при загрузке страницы? В документации прямого аналога fadeOut в jquery не нашел. Заранее спасибо

2
  • 1
    в нужный момент сделайте присвоение this.show = false
    – Dmytro
    2 апр 2019 в 15:30
  • Попытался пойти таким путем: mounted: function () { this.show = false } Но прелоадер исчезает быстрее, чем отрисовывается страница. Буду думать дальше 2 апр 2019 в 15:35

2 ответа 2

2

Настроил следующим образом:

var preloader = new Vue({
    el: '#preloader',
    data: {
        show: true
    },
    created() {
        window.addEventListener('load', () => this.show = false);
    },
});
2

var preloader = new Vue({
  el: '#app',
  data: {
    pageReady: false, // переменная отвечающая за показ элемента
    imgs: []          // картинками притормозим загрузку страницы
  },
  created() {         // хук создания приложения
    for (let i = 0; i < 20; i++)
      this.imgs.push('https://picsum.photos/1280/960/?random&' + i);
  },
  mounted() {         // хук "монтирования" - с этого момента Vue начинает работать с документом
    document.addEventListener('readystatechange', () => {
      this.pageReady = document.readyState === 'complete';
    });
  }
});
.gallery { display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; }
.gallery > img { flex 0 0 auto; width: 100px; margin: 4px; }

#loading {
  position: fixed; top: 50%; left: 50%;
  width: 250px; transform: translate(-50%, -50%);
  font: 20px/80px sans-serif; text-align: center;
  transition: transform 1.2s linear, opacity 0.4s linear 0.1s;
  background: #fff; box-shadow: 0 5px 15px 0 #0004; }

/* конечное состояние перехода loading-fade */
.loading-fade-leave-to { transform: translate(-50%, -300%) scale(0.7) !important; opacity: 0; }
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<div id="app">
  <div class="gallery">
    <img v-for="(url, i) of imgs" :src="url">
  </div>
  <transition name="loading-fade">
    <div id="loading" v-if="!pageReady">Загрузка...</div>
  </transition>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.