Скритп отображения полосок во время загрузки

[NikroVir]

Много где видел такой эффект.
Слева отображен вид блока до полной загрузки контента, справа, соответственно, после.
Очень интересует какой скрипт это делает.
Заранее спасибо.

 

[ultra]

Много где видел такой эффект.

Ссылку на пример можно?

 

[NikroVir]

Ссылку на пример можно?

Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Больше не помню где видел, но периодически примеры встречаются

 

[funnywheel]

Ссылку на пример можно?

LinkedIn например и Facebook. И по-моему в вк местами проскакивает. Все, что сейчас реактивное.

Много где видел такой эффект.

Этот прием используется в современном фронтэнде, когда нужно показать пользователю, что в ответ на его действие (например клик по кнопке "загрузить еще постов") - что-то начало происходить ( т.е. запрос отправлен ). Аналог прелоадера с более удачным поведением с точки зрения UX.

Очень интересует какой скрипт это делает.

Script. JavaScript.

В чем собственно сложность вопроса? Показываем один блок, пока контент не подгрузился, а после подгрузки удаляем плейсхолдер и аппендим подгруженный контент. 5 строк на яваскрипте*. Сам шаблон плейсхолдера аз 10 минут под свой блок с контентом верстается. Никто ведь не сверстает под ваш дизайн.

Хотя можно взять готовую верстку плейсхолдера, т.к. у клонировать элементы популярных ресурсов народ любит. Например Для просмотра ссылки Войди или Зарегистрируйся
Только врядли у вас с этим всем выйдет красота =\

* под 5 строками имеется ввиду допил вашего существующего рабочего кода на небольшое количество строк, около 5

 

[NikroVir]

Не заморачивайтесь. Просто забейте. Это не совсем украшательство, а функциональный элемент. А судя по всему, сайт у вас работает по старинке, на пхп верстку сгенерило - и целиком в браузер улетело.
Значит и прелоадеру у вас работать негде. Вуаля.

Нет, не в этом дело. Скорее я просто хочу ознакомиться с технологией. Естественно я понимаю, что прелоадер используется совместно с AJAX, но интереса это не убавляет (тем более в ближайшее время планирую вплотную заняться изучением AJAX).

 

[funnywheel]

не дружу с js и jq, поэтому и ищу готовое решение

Потому я и написал

Только врядли у вас с этим всем выйдет красота =\

а так да, ручками можно написать всё что угодно

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

Не заморачивайтесь. Просто забейте. Это не совсем украшательство, а функциональный элемент. А судя по всему, сайт у вас работает по старинке, на пхп верстку сгенерило - и целиком в браузер улетело.
Значит и прелоадеру у вас работать негде. Вуаля.
<-------------- добавлено через 3260 сек. -------------->
Так сначала изучите, как работает AJAX. Это тема на 1 вечер, используя jQuery, вместе с прелоадером. В фоллбэке аякс-запроса вы описываете свои команды. Например 1 - скрыть прелоадер, 2 - полученный от бэкэнда контент вставить в целевой блок. Правда для таких целей подобные прелоадеры скорее избыточность, но в академических целях подойдет.

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

Попробуйте чистый JS или, мой новый фаворит, VueJS. Я от jQuery в своей голове собираюсь избавляться именно при помощи него. (хотя основы аякса попробовать на jquery наверное стоит. минимум кода, только наглядная работа. собрали данные, указали обработчик, отправили запрос, получили ответ, распарсили ответ, что-то сделали (например выключили прелоадер и вставили контент))