LINUX.ORG.RU

JS. Прогресс-бар загрузки скрипта.

 


0

1

На страницу линкуется JS-файл (или пачка файлов) размером в 2-5 мегабайта. Хочется для людей с медленным интернетом показать прогрессбар загрузки скриптов. Как это делать правильно?

★★★★☆

Последнее исправление: stevejobs (всего исправлений: 1)

Ответ на: комментарий от ee1337a

Ну например в странице, в script src прописан.

А вообще я не знаю как, как угодно, лишь бы он прогрузился вместе со всеми остальными скриптами на странице. *беспомощно разводит руками*

В смысле да, это клиентский js на браузере. Вместе со странчкой грузится огромный блобарь автосгенерированного JS.

Условно, какая-нибудь жирная игрушка, которая была в оригинале написана на чем-то типа Scala и потом скомпилирована в Javascript. При этой конпеляции конпелятор запихал в js всю стандартную библиотеку исходного языка (мегабайты кода), и поэтому оно весит весьма жирно

stevejobs ★★★★☆
() автор топика
Последнее исправление: stevejobs (всего исправлений: 1)

Ну как вариант(правда крайне тупой) сделать ajax запрос текста этого скрипта, а когда он придет сделать eval

abs ★★★
()
Ответ на: комментарий от stevejobs

Тогда не знаю. Чуть выше тоже рабочий вариант есть.

ee1337a
()
Ответ на: комментарий от abs

если в браузере нет никакого тайного знания по поводу хуков на загрузку скриптов, да, буду юзать это. спасибо xDD

stevejobs ★★★★☆
() автор топика

На страницу линкуется JS-файл (или пачка файлов) размером в 2-5 мегабайта. Хочется для людей с медленным интернетом показать прогрессбар загрузки скриптов. Как это делать правильно?

Прогресс будет сложно, но в целом возможно (зная размер того что будешь грузить + разбив это на части и делая в виде пост загрузки), а вот просто «Ждите» и вертящийся кружок - просто. Для этого делаешь пустую страницу или css'ом размещаешь кружок поверх всего и вешаешь событие document.ready, оно будет сигнализировать о прогрузке скриптов и в его обработчике грохнешь этот лоадер.

BaBL ★★★★★
()
Ответ на: комментарий от BaBL

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

отметил как решенную xD

css'ом размещаешь кружок поверх всего

гифку вертящуюся, как в Windows

stevejobs ★★★★☆
() автор топика
Последнее исправление: stevejobs (всего исправлений: 1)

ajax/

var array = [['script0.js',12],['script1.js',9],['script2.js',65],.....,['script946.js',0.5]];

// ['ccылка на скрипт','размер'] var u = 0; var ls = 0;

for(var j in array) u+=array[j][1]; for(var i in array){

ls+=array[1];

$.getScript(array[0],function(){

$('div').width((ls*100/u)+'%');

})

}

Zumer
()
Ответ на: комментарий от Dron

Верно. Есть жи onload, можно юзать. Напишу щас с ошибками дабы просто принцип показать:

var src = document.getElementsByTagName('script'), srcCnt = src.length, srcQueue = srcCnt;
for (var i = 0; i < srcCnt; i++) {
    src[i].onload = function() {
        srcQueue--;
        if (!srcQueue) {
            alert('Complete!');
        }
    });
}
deep-purple ★★★★★
()
Ответ на: комментарий от deep-purple

так в чем проблема? - можно и без этого ))) - суть же расскрыта)

...а Ваш вариант хороший, в отличие от моего, который дозагружает аяксом XD

Zumer
()
Ответ на: комментарий от menangen

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

deep-purple ★★★★★
()
Ответ на: комментарий от anonymous

Он реальный прогресс показать хочет. Я чего-то не знаю и дефер-асинк помогут это сделать?

deep-purple ★★★★★
()
Ответ на: комментарий от menangen

Как подсказывает wizzard в ЖЖ, если запускать без минификатора (Google Closure Compiler), то оно займет 15 мегабайт. 5 мегабайт - это уже после минификации. И это учитывая, что сам исходный блоб (до минификации) проходил через Dead Code Elimination оптимизатор, иначе были бы десятки мегабайт.

stevejobs ★★★★☆
() автор топика
Последнее исправление: stevejobs (всего исправлений: 1)
Ответ на: комментарий от deep-purple

что распиливать на большое кол-во мелких жс-файлов уже накладно по скорости загрузки из-зи кол-ва запросов к серверу.

нас спасет HTTP/2! xD

stevejobs ★★★★☆
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.