Question

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

一个这样的资产是一个包含游戏逻辑的相当大的脚本。也许超过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事件发生。

Answer 2

您可能希望查看How to show loading status in percentage for ajax response?

这是看AJAX下载的状态。由于您正在加载脚本，因此它可能不是获取文件的最佳方式，但它可以正常工作。然后，您需要将ajax调用接收的内容放在某处执行，并且不建议使用eval。

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

2 个答案: