高级 View :我正在使用 Emscripten 将各种遗留 C/C++ 代码库转换为优化的 JavaScript,以便现代的、基于浏览器的用户群可以轻松地利用它们的功能。到目前为止,一切都很好。然而,Emscripten 转译的 JS 可能有点笨重,即使在针对网络传输进行压缩之后也是如此。
为了提高用户体验,我想在主页面加载后下载这个巨大的 JS block ,并且我想监控下载进度以显示在页面 UI 中。我知道有两种动态加载方法,但我都遇到了缺点:
- 第一种方法是创建脚本标签(嵌入在HTML页面中或由JS动态生成)。
onload
事件在文件下载完毕并准备好运行时触发。这种方法的问题是我找不到监控下载进度的方法。脚本对象确实有一个onprogress
事件,但它似乎没有做任何事情(在 Chrome 中测试过)。 - 使用 XMLHTTPRequest (XHR) 对象动态请求 JS 资源。这很好用并触发了预期的下载进度事件。但是,对下载的数据运行 JS
eval()
并没有产生正确的效果(预期的函数没有出现在 JS 命名空间中)。
对更简单的 JS 字符串执行 eval()
会得到预期的结果,所以我想知道是否有一些特殊的技巧可以运行 eval()
Emscripten 编译的代码。
相反,我实现了结合上述方法 1 和方法 2 的混合解决方案:XHR 执行初始加载并丢弃数据。然后,该页面创建一个脚本元素来加载同一个 JS 文件,该文件现在位于浏览器的缓存中并立即加载。但这显然是一个 hack,我不禁认为必须有一个更干净的解决方案。
最佳答案
不是丢弃数据,而是将数据设置为脚本标记。
var xhr = new XMLHttpRequest;
var tag = document.createElement("script");
xhr.open("GET", "foo.js", true);
xhr.onload = function (e) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
tag.text = xhr.response;
document.head.appendChild(tag);
} else {
alert("error");
console.error(xhr.response);
}
}
};
xhr.onprogress = function (e) {
Module.setStatus('Loading JavaScript: ' + (100 * e.loaded / + e.total) + '%');
};
xhr.send();
关于javascript - 动态加载 JavaScript 并监控下载进度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33859315/