Question

相关问题是here（但没有回答）。我想返回通过XMLHttpRequest加载的HTML的大小。我将文件缓存30分钟。所以我确实将文件保存在一个临时文件夹中，如 temporary_folder / filename.html 。我可以使用filesize(filename-here)获取此文件的大小。但事实是，这只是返回HTML代码的大小。此HTML文件还包含使用<img>标记的图像。我怎样才能得到这些的全部尺寸？简而言之，我想要filename.html +大小（内部图像）的大小。

function updateProgress (event)
{
    var percentComplete = ((event.loaded/event.total)*100);
    $('#progress-bar').val(percentComplete);
    $('#progressbar-value').text(percentComplete);
}

这是我更新进度条并显示加载百分比的方法。但这是根据HTML文件的大小更新的，而不是包含在其中的图像大小。说5 KB（filename.html）。此filename.html包含一些大小为3或4 MB的大图像，因此进度条的结束速度比实际加载时间快。

有任何解决此问题的想法吗？

编辑：

在构建HTML文件时，在阅读其中一个答案后，我会跟踪图像的大小，并将总大小添加到文件名中。但后来出现了一个新问题。在PHP方面，我将Content-Length设置为总大小。但现在在客户端，首先加载HTML然后再渲染图像。因此，进度条再次填充不匹配。另外，我在控制台中看到以下错误

Uncaught NotSupportedError: The implementation did not support the requested type of object or operation. (anonymous function)
w.extend.each 
w.fn.w.each 
w.fn.extend.val 
updateProgress

enter image description here

Answer 1

通过XMLHttpRequest加载的数据大小正是您使用filesize(filename-here)获得的HTML的大小，因为在解释HTML之后，浏览器会在后续请求中加载所有其他数据，如图像，脚本或CSS 。

如果你确实需要（PHP）服务器上所有嵌入文件的大小，我会假设你在构造HTML时必须自己跟踪它，即每当你写一个<img>标签时，使用filesize()并将所有数字相加。

如果您需要客户端上的大小（JavaScript），您可以遍历DOM（例如使用document.getElementsByTagName("img")，然后使用this question中描述的方法获取单个文件大小并将其添加到html文件的大小。

Answer 2

我建议你开始here

该程序是一个MHT文件创建者（实际上它根据提供的URL创建一个带有html，外部图像，javascripts，css等的zip文件）

我建议您阅读源代码并根据需要调整代码...

Answer 3

我一直在寻找类似这样的东西，但我知道一些网络服务告诉你像Pingdom Tools（tools.pingdom.com）这样的大小，并且还显示了加载时间。希望它有所帮助！

Answer 4

它提出以下问题和答案提供了一个很好的建议： Determining image file size + dimensions via Javascript?

基本上使用Ajax创建HEAD HTTP请求。这将返回Content Length

那么只需询问服务器的每个图像大小？

HTML文件的总大小（包括其中图像的大小）

4 个答案: