See progress of downloaded images of website?

Question

I want to see how far the download of an image has come.

I have a big image that is sprited, and I want to see how the download of that image goes, is that even possible?

Answer 1

There's a method already discussed here which uses a jQuery plugin.

There's also a implementation based on the 'Content-Length' response header, but it doesn't work on IE since the XHR object of IE doesn't implement readyState 3.

The last approach consists essentially from polling the XHR object and ask it's length as well as the response already downloaded. You may adapt to use downloading an image, but again, it's not browser-proof:

var myTrigger;
var progressElem = $('#progressCounter');

$.ajax ({
    beforeSend: function (thisXHR)
    {
            myTrigger = setInterval (function ()
            {
                    if (thisXHR.readyState > 2)
                    {
                            var totalBytes  = thisXHR.getResponseHeader('Content-length');
                            var dlBytes     = thisXHR.responseText.length;
                            (totalBytes > 0)? progressElem.html (Math.round ((dlBytes/totalBytes) * 100) +"%"):progressElem.html (Math.round (dlBytes /1024) + "K");
                    }
            }, 200);
    },

});

I hope it helped. Cheers