bugo_aneo
@bugo_aneo
Верстальщик по жизни, йог, буддист, кофеман

Как организовать асинхронную загрузку экрана захвата и остальной страницы?

Здравствуйте коллеги!

Есть задача: сделать лендинг с попап-экраном захвата, который загружается СРАЗУ при ПЕРВОЙ загрузке страницы.

САБЖ: Есть лендинг на котором нужно организовать поп-ап (не могу подобрать более подходящее определение) окно, которое появляется СРАЗУ с загрузкой. На нем будет что-то типа интерактивной секции, где пользователь указывает пол-возраст-цель (похудеть-набрать вес) и кнопкой "Продолжить".

ЗАДАЧА: Это попап окно АКТИВНО сразу же, загружается первым и не закрывается до клика на кнопку. После клика оно плавно исчезает и пользователю становиться доступен остальной контент. НО!!!!! Оно не должно мешать загрузке остальной страницы и ее скриптов.

Я вижу только 2 варианта:
1. Залить его вместе со стилями и скриптами в index.html, типа как первый (быстрый) экран с position: fixed; z-index: 100; , но не знаю, как это отразиться на загрузке остальной страницы.
2. Сделать его как своего рода "прелоадер", но в скрипте отрубить закрытие после загрузки основной страницы, как это происходит у прелоадера. Этот вариант какой-то крЫвой и сложный... ИМХО!

ВОПРОС: Порекомендуйте, как организовать такое по-феншую?

Заранее ОГРОМНОЕ спасибо!!!
  • Вопрос задан
  • 159 просмотров
Решения вопроса 1
@AntowaKartowa
Мне кажется если попап всегда встречает посетителей, то имеет смысл его добавить сразу в базовую верстку и его стили в базовый цсс, а джаваскрипт чтоб уже после загрузки подхватывал, делал кнопку в попапе активной, вешал обработчик и тд.

Если бы это был логин попап, то контент на фоне я б сразу не рендерил. Есть куча умников умеющих в девтулс удалить попап и смотреть контент. Если контент подгружается джаваскриптом, то загружаете в фоне сохраняете в переменную, но не рендерите пока пользователь не кликнет на кнопку в попапе.

Оно не должно мешать загрузке остальной страницы и ее скриптов.

Не очень ясно. Ну если попап часть лендинг пейджи, то как разметка и стили для попапа могут блокировать загрузку лендинг пейджи. Ну могут совсем немного увеличить время за счет того что увеличится размер разметки и стилей.

Другое дело джаваскрипт. Его загрузка и выполнение блокируют обработку и рендеринг страницы. Потому рекомендуется объявление джаваскрипта размещать или в самом низу страницы - начнет загрузку скрипта после загрузки страницы. Но кажется это не всегда гарантирует хороший результат.

Лучше добавить в теги скрипт атрибуты async или defer. Первый не блокирует рендеринг страницы, но начинает свое исполнение сразу как только загружен. Это потенциально может привести к проблемам. Например попап еще не отрендерен, а скрипт уже начал выполнение и не нашел в разметке попапа, не смог повесить обработчики событий и все нерабочий попап получится. Из-за этого же этот атрибут не гарантирует, что скрипты будут выполнятся в том порядке в котором объявлены. Опять же одни скрипты могут зависить от других и это может привести к неработающему функционалу.

Дефер же гарантирует, что исполнение скрипта начнется только после полной загрузки страницы и что скрипты будут исполнятся в порядке их объявления. Потому он самый предпочтительный.

Вообще есть бесплатный курс по оптимизации загрузки страницы от гугла. https://www.udacity.com/course/website-performance...

Кажется я в итоге не на ваш вопрос ответил.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
03 дек. 2022, в 09:05
100 руб./за проект
03 дек. 2022, в 02:24
5000 руб./за проект
03 дек. 2022, в 00:06
4000 руб./за проект