是否可以检查HTML页面中加载了多少字节？

Question

是否可以检查HTML Page中加载的字节数？如果没有，任何人都可以解释这些percentage preloader在html页面中是如何工作的，或者它们只是用户的错觉吗？

我想为我的网站创建pre-loader，其功能类似于flash pre-loaders。但无法理解如何检查网站的每个元素是否已加载或仍在加载。

Answer 1

它返回html页面的大小（以字节为单位）或者你可以获得内容长度标题

var request = new XMLHttpRequest();
request.open('GET', document.location, false);
request.send();
var size = request.getAllResponseHeaders().toLowerCase().match(/content-length: \d+/);
document.getElementById("size").innerHTML = size + " bytes";

Answer 2

无法获取当前页面的加载进度。

但是，如果你通过AJAX加载任何东西，它实际上非常简单。

服务器将（或者至少应该）在响应中包含Content-Length标题，您可以阅读（xhr.getResponseHeader("Content-Length")）并且还可以读取到目前为止下载的数量（{{1并计算一个百分比。

但是，上述内容在某些较旧的浏览器中无效 - 他们不希望您在完全下载之前访问xhr.responseText.length。

在更新的浏览器中，即支持“XMLHttpRequest2”的浏览器中，您可以使用xhr.responseText事件和相关属性来获取进度。 More details on MDN，但一般的想法是使用progress来加载分数。