Як зробити індикатор завантаження сторінки в% stack overflow російською

Користувався гуглом, прям так і писав, купа статей, але так і не знайшов скрипт, який би відображав процес завантаження сторінки.

Яким методом взагалі відстежується завантажена сторінка чи ні, її стан. Мені б тільки це дізнатися чи є спосіб відстежити на скільки відсотків вона завантажена, а вже візуально і на css підв'язати зможу.

Зрозуміло, що можна зробити заглушку, яка буде висіти 4 секунди і буде завантажуватися від 0 до 100%, ну а якщо інтернет поганий і завантаження затягнеться в 4 рази.

За готове рішення буду вдячний (смужка від 0-100%)

заданий 16 дек '16 о 12:58

Що стосується заглушок, то їх і реалізують в вигляді зациклених анімацій тільки для того, щоб не було явного закінчення.

Що стосується реального індикатора завантаження, то особисто мені відомо тільки один спосіб -

  • все вантажити за допомогою XMLHttpRequest і використовувати його подія progress.

З приводу заглушки. Щоб заглушка показувалася тільки до повного закінчення формування сторінки використовують події.

Якщо потрібно щоб користувач якомога швидше побачив сформовану сторінку використовують подія DOMContantLoaded. яке посилається тоді, коли всі скрипти завантажені і dom повністю сформований на стільки що до нього вже можна звертатися. Єдине що не встигає завантажиться, це картинки посилання на які вказані в html розмітки. Це підходить в 90% випадків при яких на їх місце ставиться красива заглушка сигналізує що скоро тут буде зображення.

У тих випадках, коли зображення є частиною програми, тобто як у випадку з фоном на головній сторінці використовують подія load. яке посилається тоді, коли скрипти завантажені, dom сформований і все картинки завантажені.

Окремо варто сказати що скрипти js бібліотек додають в кінці блоку body. а на подію підписують document.

Дивлячись як завантажується сторінка:

  • Якщо вантажиться САМА СТОРІНКА. апдейт прогрессбар по завантаженню окремих компонентів. скрипти, стилі, контент. Орієнтовна реалізація: повісити на виконання кожного завантажувального модуля зміна кроку завантаження:

  • Якщо вантажиться ЗАПИТ ВІД СЕРВЕРА. апдейт прогрессбар через аякс. там теж методів чимало. АТМ я і сам шукаю рішення цього питання, є пара напрацювань в голові, але це якщо ми вантажимо контент на сторінку після завантаження основної сторінки, і подгрузки контенту через сервер. Можу озвучити, якщо у тебе другий спосіб, разом поміркувати.

    відповідь дан 16 дек '16 о 13:25

    Схожі статті