Fetch and load a whole page with AJAX

Question

I realize that it's generally not a good idea to do this but the reason why I want to is because it's a really heavy page and I want to show the user progress of the download and when it's done load the page. I can either do this with some kind of spinner but is it possible for me to show the actual progress? Can I see how much and what data has been downloaded? Let's say I use jQuery for the AJAX-request how do I do this? If you have other suggestions please feel free to suggest.

Answer 1

Perhaps if its possible to divide the page into several pieces that you load, you could show some progress using javascript. But I don't think it's possible to count the number of bytes loaded from one go

Answer 2

You can't monitor the progress using javascript only. You will need to have a server component as well. An Ajax request will only trigger a callback when it is completed. So, you will need to poll the server with a second Ajax request to ask how many bytes have already been sent. Your server must be able to monitor the progress of an "upload".