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

debugcn 发表于 Dev

安德鲁克

举例来说，我正在创建一个游戏。我有一个小脚本，其任务是加载所有资产，并在加载资产时向用户显示进度栏。

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

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

炸药

<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触发任何事件，则显示通用微调器）。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。