如何获得下载<script>的进度？

Question

比如说,我正在制作一款游戏.我有一个小脚本,其工作是加载所有资产并在资产加载时向用户显示进度条.

一个这样的资产是一个包含游戏逻辑的相当大的脚本.也许超过3 MB.

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

Answer 1

<script>标签只有火load和error事件; 他们不发动progress事件.但是,在现代浏览器中,Ajax请求确实支持progress事件.您可以通过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事件触发,则显示通用微调器).