How to make sure that all css and js files in web page or android app are loaded?

Question

I have developed a mobile application which loads 3 css and 7 javascript files. Problem is if the wifi signal is very slow, HTML loads before all javascript and stylesheets are loaded. Since stylesheet is not loaded, HTML looks disturbed and after few seconds (i guess after css and js are loaded properly), HTML structure automatically take correct format but I dont want to show the disturbed format and to do that I need to make sure that all js files are loaded first then only HTML should display.

If you have any idea how can this be achieved ?

Answer 1

You can do using Cache manifests. Read these resources:

• http://appcachefacts.info/
• http://en.wikipedia.org/wiki/Cache_manifest_in_HTML5
• https://developer.mozilla.org/en/docs/HTML/Using_the_application_cache

Alternatively - ensure your resources are loaded before the body by placing them in the right place (head tag).

Answer 2

You should link to your external css stylesheet at the top of your webpage in the header like this:

<link rel="stylesheet" type="text/css" href="http://whiterootmedia.com/css/example.css" />

or insert your <style> element in the header. Likewise this should be done for your JavaScript if it effects your initial layout. Keep in mind that if you are using an external JS file, the browser will stop rendering your page at the point in your code where your external JavaScript file is referenced, to load that external JavaScript file. If you're using a lot of JavaScript, place it at the bottom of your page (contrary to what most people do) or use an onload() function.

The webpage is loaded top-to-bottom, so the problems you're having should be related to the order of your css (most likely).