jquery - 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!

Answer 1

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.