Как скрыть loader при загрузке контента в видимой области, а не всей страницы?
Здравствуйте.
Частенько приходится ставить loader на загрузку сайта, чтобы пользователь не наблюдал никаких скачков при загрузке.
Но иногда получается так, что страница может быть крупной и классическое добавление класса loaded для body когда $(document).ready, делает ожидание слишком длительным (хоть все и оптимизировано).
В связи с этим вопрос - знаете ли вы практики настройки скрытия loader'a когда контент видимой области был загружен. Т.е. не весь документ, не конкретный объет или изображение, а именно блок видимой области. Ведь можно перейти по ссылке с анкором и если, например, поставить закрытие loader'a на окончание загрузки 1ого экрана, все остальное будет продолжать прыгать... Соответственно, перейдя по анкорной ссылки будем наблюдать скачки...
Да это понятно - как иначе-то. Я про время его загрузки. Лоадер показывается, пока не загрузится вся страница - это бывает дольше, чем нужно. Можно было бы уже давно отдать пользователю тот экран, на который он пришел - 1ый или тот, что по анкорной ссылке.
Опишу как бы я делал. При загрузке страницы создаешь таймер. Если по его истечению у тебя не сработал ready ивент, то убираю лоадер и показываю что есть.
P.S. Не думаю, что у тебя там все так оптимизировано раз есть такая проблема.
Это, конечно, вариант, но он исключает подстройку под медленный интернет. Такое себе...
Насчет оптимизации: весь CSS 1ого экрана сжат и инлайном в хэдере, 2ой css подгружается из футера аппендом, тоже минифицированный - больше нет. js'ов только 2 - естественно в футере, все изображения в webp. Для полной оптимизации остается лишь lazy-load изображений. Но пока речь про loader
