CODEWITHSUNDEEP
javascriptphphtmlxmlhttprequest
Sarvap Praharanayuthan
Sarvap Praharanayuthan

Reputation: 4360

Total size of the HTML file (includes size of images inside it)

Related question is here (but no answer). I wanna return the size of HTML loaded through XMLHttpRequest. And I cache files for 30 minutes. So I did save the files in a temporary folder say temporary_folder/filename.html. And I am able to get the size of this file using filesize(filename-here). But the fact is this just returns the size of HTML code inside this. This HTML file also contains images using <img> tag. And how can I get the entire size of these? In brief I wanna size of the filename.html + sizes of (images inside).

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

This is how I update the progress bar and show the percentage loaded. But this is updated with the size of the HTML file and not with sizes of images included in it. Say 5 KB (filename.html). This filename.html contains some big images sizing 3 or 4 MB for example, so the progress bar ends faster than the actual loading time.

Any ideas to resolve this?

EDIT:

After reading one of the answers here while building the HTML file I kept track of the sizes of images and added the total size to the filename. But then arises a new issue. In the PHP side I set the Content-Length with the total size. But now on the client side, the HTML loads first and then the images are rendered. So there is a mismatch in the progress bar filling again. Also I see the following error in the console

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

enter image description here

Upvotes: 1

Views: 587

Answers (4)

Lindsay Morsillo
Lindsay Morsillo

Reputation: 530

It hink the following question and answer provides a good suggestion: Determining image file size + dimensions via Javascript?

Basically make a HEAD HTTP Request using Ajax. This will return the Content Length

So just ask the server for each image size that way?

Upvotes: 0

bastos.sergio
bastos.sergio

Reputation: 6764

I would suggest you start here

The program is a MHT file creator (essentialy it creates a a zip file with the html, external images, javascripts, css, etc... based on a supplied url)

I recommend that you read the source and adapt the code to your needs...

Upvotes: 1

bluefirebolt
bluefirebolt

Reputation: 3

I have been looking out for something like this, but I know some webservices that tell you the size like the Pingdom Tools (tools.pingdom.com), and also shows the load time. Hope it helps!

Upvotes: 0

agoeb
agoeb

Reputation: 269

The size of the data loaded through XMLHttpRequest is exactly the size of the HTML that you obtain using filesize(filename-here), because all other data like images, scripts or CSS is loaded in subsequent requests by the browser after interpreting the HTML.

If you do need the size of all embedded files on the (PHP) server, I would assume that you have to keep track of it yourself when constructing the HTML, i.e. whenever you write an <img> tag, use filesize() and add up all the numbers.

If you need the size on the client (JavaScript), you can traverse the DOM (e.g. using document.getElementsByTagName("img") and then use the approach described in this question for getting individual file sizes and add these to the size of the html file.

Upvotes: 1

Related Questions