HTML文件的總大小（包含其中的圖像大小）

相關問題是here（但沒有回答）。我想返回通過XMLHttpRequest加載的HTML大小。我緩存文件30分鐘。所以我沒有將文件保存在臨時文件夾中，例如temporary_folder/filename.html。我可以使用filesize(filename-here)來獲得這個文件的大小。但事實是，這只是返回HTML代碼的大小。該HTML文件還包含使用<img>標記的圖像。我怎樣才能獲得這些尺寸？簡而言之，我想要大小（內部圖像）的文件名。HTML文件的總大小（包含其中的圖像大小）

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

這是我如何更新進度欄並顯示加載的百分比。但是這是用HTML文件的大小更新的，而不是包含在其中的圖像的大小。說5 KB（文件名.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

來源

2014-01-15 Viswalinga Surya S

您可能可以使用['AJAX progress']（http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/）（HTML 5 only iirc ）。我假設在這個例子中'evt.total'是字節... – Andy

你能提供更多的細節嗎？在客戶端瀏覽器或服務器上緩存？如果前者如何拯救他們？你想要達到那個普通的緩存機制不能做什麼？你打算怎麼處理這個尺寸？ –

另外 - 你緩存的圖像或只是HTML？ –

通過XMLHttpRequest的加載的數據的大小正好，你獲得使用filesize(filename-here)的HTML的大小，因爲所有其他在解釋HTML之後，瀏覽器在後續請求中加載圖像，腳本或CSS等數據。如果您確實需要PHP（PHP）服務器上所有嵌入文件的大小，那麼我會假設您在構建HTML時必須自己跟蹤它，也就是說，無論您何時編寫<img>標記，請使用filesize()並添加所有的數字。

如果您需要在客戶端（JavaScript的）的大小，你可以遍歷DOM（例如，使用document.getElementsByTagName("img")，然後使用this question描述的方法用於獲取單個文件大小並將其添加到HTML文件的大小。

來源

2014-01-15 16:23:03 agoeb

編輯我的問題。 –

我一直在尋找出這樣的事情，但我知道一些web服務，告訴你喜歡Pingdom的工具尺寸（tools.pingdom.com），也說明了加載時間，希望它可以幫助！

來源

2014-01-15 16:28:42 bluefirebolt

我建議你開始here

該程序是一個MH T文件的創造者（基本上它創建一個與HTML，外部圖像，javascripts，CSS等基於提供的url的zip文件）

我建議您閱讀源代碼並根據需要調整代碼。 ..

來源

2014-01-15 16:28:54

它hink以下問題和答案提供了一個很好的建議： Determining image file size + dimensions via Javascript?

基本上讓使用Ajax一個HEAD HTTP請求。這將返回Content Length

所以，只要問服務器的每個圖像大小的方式？

來源

2014-01-15 16:29:13