Javascript source file download progress?

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!

Answers:

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.