3

I have a mobile website that uses jQuery mobile and am having a problem with the loading of the CSS on mobile devices. On my Nexus S with Jellybean, the HTML will load very quickly, but the CSS takes a good 3-4 seconds, during which this is what the website looks like:

enter image description here

The mobile website itself can be found at http://axialdev.ekomobi.com

The CSS file is linked at the top, but it still seems to load last. The one containing the colors and the visible styles is called client-damafro.min.css.

Are there any obvious problems with the way I'm doing things? How can I solve my loading problem?

Alex Turpin
  • 46,743
  • 23
  • 113
  • 145
  • You're seeing this because you're using jQuery mobile. Try viewing the page with JavaScript disabled: you see the same "unstyled" appearance. The JavaScript does not run until some time after the CSS and HTML have been loaded and displayed in the browser window, so you see this briefly when you first navigate to the page. – nathan Oct 16 '12 at 00:58
  • why dont you show us how your head tag looks like? and how you add your scripts and where? – Ayyash Oct 17 '12 at 09:15

4 Answers4

8

I know this will sound counter intuative, but can you put the scripts right after the css in the head.

This will load all the 'stuff' first and then the html. It will avoid the quick flashing before the js is applied....

I tried it locally by saving the complete page to my computer and changing it and seems to work...

Cheers

Robin

Ps: I am ignoring the whole load scripts last thing. i am aware of that...

Robin Rieger
  • 1,204
  • 1
  • 16
  • 37
2

First I would minify all your CSS

I Would also minify your JavaScript

I would suggest checking out Google Chrome Developer Tools

One last thing is I would move the jQuery and jQuery Mobile javascript files to load right after the css files.

<link rel="stylesheet" href="/css/responsive.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

as jQM controls the look and feel of the app, loading these first might help as you are loading the HTML first and then applying the CSS

Community
  • 1
  • 1
Phill Pafford
  • 83,471
  • 91
  • 263
  • 383
0

To me it seems like you'r doing things right in terms of placing css in etc. My suggestion would be that you get yslow (https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh) and try to optimize according to its suggestions. Alternatively you can merge all your css in to a single file for production and use this tool to compress it http://www.cleancss.com/

Additionally see this post for more pointers Force browsers load CSS before showing the page

Community
  • 1
  • 1
Rasmus Bech
  • 84
  • 2
  • 8
0

I would try to put all your javascript(requests) at the bottom of your code, right before the closing </body> tag, and make sure your scripts starts when the DOM is ready (loaded).

Another idea: Try to host the jquery-mobile library on your own server.

Luca
  • 9,259
  • 5
  • 46
  • 59
Rockbot
  • 935
  • 1
  • 6
  • 24