javascript - 如何获取下载 <script> 的进度？

Question

比方说，我正在制作一款游戏。我有一个小脚本，它的工作是加载所有 Assets 并在 Assets 加载时向用户显示进度条。

其中一项 Assets 是包含游戏逻辑的相当大的脚本。可能超过 3 MB。

如何向用户显示第二个脚本的加载进度？

Answer 1

<script>标签只触发 load和 error事件；他们不开火progress事件。然而，在现代浏览器中，Ajax requests do support progress events .您可以通过 Ajax 加载脚本内容并监控进度，然后将脚本内容放入新的 <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 ，您可以构建进度报告 UI 以仅在第一个 progress 之后显示加载栏事件(或者，如果没有触发 progress 事件，则显示通用微调器)。