Как отобразить уже отрисованную страницу после смены роута vue router 2?

Question

[egorkozelskij]

Здравствуйте!

При переходе по router-link меняется страница (компонент-страница) и далее в течении секунды начинают постепенно подгружаться остальные компоненты - то есть я отчетливо вижу как они начинают отрисовываться. Это выглядят довольно некрасиво. Каким образом можно сделать отрисовку в фоне, а далее уже показывать пользователю полностью отрисованную страницу одним кадром?

Answer 1

[Антон Антон]

Добавить префетч на асинхронные импорты (иногда (не всегда) целесообразно вообще их убрать)
component: () => import(/* webpackPrefetch: true */ 'path/to/component')
сделать так, чтобы данные для компонентов получались не в created/mounted, а раньше, например сильно заранее и хранились в vuex и/или пока получаются данные - отображались скелеты или экран загрузки со спиннером.

Comments

[egorkozelskij]

Данные у меня загружаются в самом начале - проблема не в этом.
Именно сам компонент содержит много графики, которая отрисовывается браузером около секунды (похоже на то, как отрисовываются текстуры игры на слабом компьютере). Вот я хотел бы что-то типо двойной буферизации, чтобы браузер показал компонент целиком только после полной его отрисовки в буфере

[egorkozelskij]

Приведу пример, на сайте - https://habitica.com/ - при переключении вкладок страница со всеми графичискими примитивами мгновенно отображается (ощущение, что она уже отрисована в буфере), но после самого нажатия проходит порядка полсекунды пока ничего не происходит (я полагаю, что именно в этот момент они и отрисовывают все компоненты и только после того как они готовы моментально отобразиться - показывают всю страницу целиком)

[Антон Антон]

egorkozelskij, так речь про загрузку картинок? или какая графика имеется ввиду? Теоретически можно попробовать добавить эффект перехода на router-view типа transition-group, добавить в router-view :key с полным путем, классы прописать, чтобы они на одном месте были (например у убираемого блока абсолютное позиционирование).
без примера сложно

[egorkozelskij]

Антон Антон, Я решаю эту проблему частично вот так:

App.vue

<template>
 <Header/>
  <router-view></router-view>
</template>

SomePage.vue

<template>
    <div v-show="show">....</div>
</template>

export default {
    data: () => ({
        show: false,
    }),
    mounted() {
        setTimeout(() => {
            this.show=true;
        }, 500);
    },
}

То есть я отрисовываю страницу, но она в это время не видна и пользователь не видит как последовательно отрисовываются все ее части. А, условно, через 500мс я убираю ее прозрачность и пользователь видит страницу за 1 кадр, а не процесс отрисовки эти 500мс.
Тут единственная проблема - можно ли как то отследить когда торисовка завершена, чтобы не угадывать со времененем в 500мс?

[Антон Антон]

egorkozelskij, так что там грузится-то? внешние ресурсы? генерится графика в канвасе? я пока не понял.

[egorkozelskij]

Антон Антон, Грузится большое количество svg

[Антон Антон]

egorkozelskij, С внешнего ресурса или генерируются?

[egorkozelskij]

На сервере все уже готовое лежит и просто браузер их подгружает

<img src="/image.svg">

[Антон Антон]

вообще в теории можно перехватывать onload у img и обрабатывать его в компоненте. например в data завести переменную с количеством картинок, в обработчике onload уменьшать на единицу а когда все загрузится - скрывать экран загрузки.

Answer 2

[Иван]

Можно всю страницу добавить в блок else, а v-if поставить лоадер с boolean флагом. И по какому-нибудь условию менять этот флаг.

<template>
<div v-if="loader">
<span>loading...</span>
</div>
<div v-else>
<!--- тут ваша страница --->
</div>
</template>

А уже в компоненте флаг менять в created, mounted или по таймеру или nexttick

Comments

[egorkozelskij]

Когда сработает v-else - начнется процесс рендеринга страницы и пользователь будет видеть этот процесс в течении некоторого времени (0-200мс). Я же хочу, чтобы полователь за О(0) увидел готовую отрисованную страницу. Ищу что-то, чтобыпри срабатывании v-else пользователь ничего не видел до тех пор, пока все внутренние компоненты не будут готовы моментально показаться на экране в уже отрисованном виде

ПС: Так как на странице много графики высокого расширения - процесс отрисовки не самый быстрый.

[Иван]

Если не рассматривать SSR или lazy-load, то боюсь вопрос рендринга целиком страницы, а не отдельных изображений не попадает под определение "простой".
Простое же решение что-то вроде этого..

<img
    alt="Vue logo"
    src="./assets/logo.png"
    @load="handleLoad"
    class="{invisible:!loaded}"
  />

.invisible {
opacity: 0
}