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 that you have read and understand our privacy policy and code of conduct.

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