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 informati

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.