Скажем, например, я создаю игру. У меня есть небольшой script, задачей которого является загрузка всех активов и представление пользователю индикатора выполнения при загрузке активов.
Одним из таких активов является довольно большой script, который содержит логику игры. Возможно, более 3 МБ.
Как я могу показать ход загрузки второго script пользователю?
<script> теги только стреляют load и error события; они не запускают события progress. Однако в современных браузерах Ajax-запросы поддерживают progress события. Вы можете загрузить контент script и отслеживать ход выполнения через Ajax, а затем поместить содержимое script в новый элемент <script> при завершении загрузки:
var req = new XMLHttpRequest();
// report progress events
req.addEventListener("progress", function(event) {
if (event.lengthComputable) {
var percentComplete = event.loaded / event.total;
// ...
} else {
// Unable to compute progress information since the total size is unknown
}
}, false);
// load responseText into a new script element
req.addEventListener("load", function(event) {
var e = event.target;
var s = document.createElement("script");
s.innerHTML = e.responseText;
// or: s[s.innerText!=undefined?"innerText":"textContent"] = e.responseText
document.documentElement.appendChild(s);
s.addEventListener("load", function() {
// this runs after the new script has been executed...
});
}, false);
req.open("GET", "foo.js");
req.send();
Для старых браузеров, которые не поддерживают Ajax progress, вы можете создать свой пользовательский интерфейс выполнения отчетов, чтобы отображать панель загрузки только после первого события progress (или иначе показать общий счетчик, если нет progress события когда-либо срабатывают).
Вам может понравиться Как показать статус загрузки в процентах для ответа ajax?
Он должен видеть статус загрузки AJAX. Поскольку вы загружаете script, это может быть не лучший способ получить файл, но он может работать. Затем вам нужно будет поместить содержимое, полученное с помощью вызова ajax где-то, чтобы выполнить, и eval не рекомендуется.