Содержимое, загруженное GET-запросами в SPA, появляется на странице мгновенно, что делает переход ужасным.Любой способ сгладить вещи? - PullRequest
0 голосов
/ 25 января 2019

В конце дня выполнение запроса GET занимает много времени, и я не могу рассчитывать на мгновенное получение контента, однако мне интересно, есть ли способы сделать переход с одной страницы на другую менее сногсшибательным .

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

Должен ли я поставить что-то вроде экрана загрузки, который будет воспроизводиться, пока все не загрузится? Существуют ли другие способы сглаживания?

1 Ответ

0 голосов
/ 25 января 2019

Уровень 1 - Не полагайтесь на фактический размер изображения для макета. Используйте CSS (или атрибуты высоты и ширины), чтобы определить размеры тегов изображения. Это поможет с раскладкой макета.

Уровень 2. Если вы хотите видеть заполнители, попробуйте использовать CSS, чтобы придать тегам img цвет фона.

Уровень 3 - Если вы все еще беспокоитесь об общем эффекте, вы можете использовать CSS, чтобы скрыть всю страницу, а затем перейти к ней после завершения загрузки страницы. Для этого вам нужно добавить JS для прослушивания события завершения загрузки, а затем переключить класс CSS для отображения содержимого.

JQuery / JS

  $(window).load(function() {
    $("body").removeClass("loading");
  });

HTML

  <body class="loading">...</body>

CSS

  body {
    opacity: 1;
    transition: opacity .5s;
  }

  body.loading {
    opacity: 0;
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...