Javascript source file download progress?

Question

I am sourcing a large mapping/widget javascript file (1.3 MB) and wanted to display a progress bar as it loads. I know firebug's net watch tab knows a lot of this information, but I would like something more lightweight. I came across this website: http://blog.greweb.fr/2012/04/work-in-progress/

which almost gets me there except that I need to source the file I'm downloading. I didn't see any listeners on jQuery's getScript as the file downloads. Does anyone know how to get at the progress of a sourced file download?

Thanks in advance!

score 8 · Accepted Answer · edited May 23 '17 at 12:33

If you use getScript() you can execute a function using the success callback but that is only when the script has finished loading.

I would recommend having a loading indicator image (you can find many at http://ajaxload.info/) and hiding it when the script has loaded.

This SO has a couple of other ideas. One solution is below:

var myTrigger;
var progressElem = $('#progressCounter');
$.ajax ({
    type            : 'GET',
    dataType        : 'xml',
    url             : 'somexmlscript.php' ,
    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);
    },
    complete        : function ()
    {
        clearInterval (myTrigger);
    },
    success         : function (response)
    {
        // Process XML
    }
});

This sets an interval to compute the progress by taking loaded bytes and total bytes. This might work for you.

Thanks @sachleen, that is what I'm presently doing, I was hoping for something a little more like what firebug does. — Jonathan, Jun 29 '12 at 17:14
I think that will work for me, thanks so much! I like the way the myTrigger works. — Jonathan, Jun 29 '12 at 17:47

Javascript source file download progress?

1 Answers1

Linked