假设，例如，我正在创建一个游戏。我有一个小脚本，其工作是加载所有资产并在加载资产时向用户显示进度条。
其中一个资产是包含游戏逻辑的相当大的脚本。可能超过 3 MB。
如何向用户显示第二个脚本的加载进度？
【问题讨论】：
标签： javascript html
<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，则显示通用微调器事件发生过）。
【讨论】：
你可能想看看How to show loading status in percentage for ajax response?
查看AJAX下载的状态。由于您正在加载脚本，因此它可能不是获取文件的最佳方式，但它可以工作。然后，您需要将 ajax 调用收到的内容放在某处执行，不建议使用 eval。
【讨论】：
eval 可接受的用例。你有什么不推荐它的实际理由，还是你只是盲目地这么说？
eval 是为做这样的事情而生的。唯一不建议使用eval 的情况是在不需要它的情况下，或者这是一个很大的安全风险。这可能是安全风险的唯一方法是中间人攻击或受损服务器 - 两者都比eval提供更大的风险。