java - Challenge in Asynchronous Javascript Loading -

background: i'm working on gwt based application deployed on google app engine. application uses custom library, requires 6-7 big core javascript files (~3 mb total size) loaded front. load application's home page, takes anywhere 20-40 secs depending upon bandwidth. set upon task address slow page load issue.

i made plain html home page, without gwt or custom library's components. home page contains login button , simple jquery based image slider. i'm using google accounts based authentication. on home page, use "asynchronous ordered" javascript loading technique presented here: http://stevesouders.com/efws/loadscript.php?t=1303979716 load core .js files. while user looking @ home page or interacting image slider, .js files quietly download in background. after user logs in, control redirected main html file, retrieves .js files cache, , loads app. time loading of app faster. so, home page loads in 2-5 secs , main app loads pretty fast.

it's need. there's issue.

issue: if user clicks on login button fast (i.e. before asynchronous .js file downloads complete), asynchronous downloads break. in fact, user navigates away home page (to google accounts sign-in page or other page), asynchronous downloads break. when main app displayed, retrieves partially downloaded .js files cache , reports "unexpected end of line" errors.

i 1 thing address problem - disable login button until asynchronous downloads complete. better current situation because allows user @ least see home page , interact image slider. it's not ideal.

ideally i'm looking way check hash (or file size) of .js files in main html, see whether correct. if there's mismatch, download files again. i'm not javascript expert means , not sure whether that's possible. so, i'm looking experts here. might common problem people have addressed in other ways. so, i'm open other alternatives.

thanks.

updates:

1. i have multiple (6-7) .js files loaded.
2. the .js files independent , need loaded in particular order.

3mb of javascript files pretty crazy. need much? if should concatinating / minifying them using jsmin or uglifyjs. reduce size @ least 50%. next ensure gzipping enabled on server hosting these files. should reduce size 50%.

lastly should use expires header ensure file caches clientside forever. uncache update query param on src:

<script src="compressed.js?v=1"></script> 

as checkinging hash of filesizes, not possible, though check existence of variables libs introducing global namespace. example:

jqueryloaded = !!window.jquery;