1

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

Community
  • 1
  • 1
Sarvap Praharanayuthan
  • 4,212
  • 7
  • 47
  • 72
  • You might be able to do something with [`AJAX progress`](http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/) (HTML 5 only iirc). I'm assuming that `evt.total` in this example is bytes... – Andy Jan 15 '14 at 16:16
  • Can you provide more details? Cache in a client browser or on your server? how are you saving them if the former? What are you trying to achieve that normal caching mechanisms don't do? What are you going to do with the size? – Alex K. Jan 15 '14 at 16:17
  • Also - are you caching the images or just the html? – Lindsay Morsillo Jan 15 '14 at 16:22
  • @AlexK. There will be some filter options at the left side of my page. When users select/deselect some, the form will be submitted through POST method by `XMLHttpRequest`. After DB query the output will be saved as a HTML file in a temporary folder. The the HTML file is read, file size is calculated, content-length header is set, output is echoed. If again the form is submitted with same parameters, file from the temporary folder will be echoed without DB query again. – Sarvap Praharanayuthan Jan 15 '14 at 16:24
  • @LindsayMorsillo: Of course, the images will be cached. – Sarvap Praharanayuthan Jan 15 '14 at 16:24

4 Answers4

1

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.

agoeb
  • 269
  • 2
  • 12
1

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...

bastos.sergio
  • 6,684
  • 4
  • 26
  • 36
0

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!

bluefirebolt
  • 3
  • 3
0

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?

Community
  • 1
  • 1
Lindsay Morsillo
  • 530
  • 6
  • 19