javascript - Does jquery's $.get(...) ajax success function trigger when the file has completed downloading? -
basically want know if 'success function' of jquery's $.get() method fired when whole file has finished downloading. suspect is, want make sure.
i'm using series of $.get() requests load files of page (css, javascript, etc) while display 'loading screen'.
on each success callback of request, load next file until they're finished, , remove loading screen.
the issue randomly, on slow connections (site designed mobile browsing) loading screen disappear css site has not been applied until ~1-2 seconds later user see non-styled site briefly before css applied buttons, etc.
here code i'm using loading resources
if(!window.myresourceloader) window.myresourceloader = {}; // list of resources load myresourceloader.myresources = new array( "include/resources/.....css", "include/resources/.....css", "include/modules/.......js", "include/...............js", "include/...............js"); // reverse array load in order above myresourceloader.myresources.reverse(); myresourceloader.resourcestoload = myresourceloader.myresources.length; /** * recursive function - loads resources */ myresourceloader.loadmyresources = function() { // exit condition - stop recurring if we've run out of resources load if(this.myresources.length < 1) { $(".meter > span").each(function() { $(this).stop().animate({ width: "100%" }, 300); }); return; } // next resource load var resource = this.myresources.pop(); // if resource css file, append head if(resource.match(/css$/)) { // append timestamp resource resource += ("?" + new date().gettime()); // ie support if(document.createstylesheet) document.createstylesheet(resource); else $("head").append($('<link type="text/css" rel="stylesheet" href="' + resource + '">')); // recusivley load resources this.loadmyresources(); } else if(resource.match(/\.js$/)) { // append timestamp resource resource += ("?" + new date().gettime()); // if resource js file, make request $.get(resource, function() { // on successful request of file, make call load resource myresourceloader.loadmyresources(); }); } }
the final javascript file 'load end' .js file following:
// fade out loading screen $('#webapp-loader').css('opacity',0); settimeout(function() { $('#webapp-loader').remove(); }, 1000);
so can see, there 1 second buffer @ end of loading before removes loading screen.
yes $.get() downloads whole file, commented above issue here resource loading appending css file head of document, triggers download of css file - above code not wait css in head finish downloading before thinks 'done loading'
Comments
Post a Comment