CODEWITHSUNDEEP
cssmobilejquery-mobileloading
Alex Turpin
Alex Turpin

Reputation: 47776

Delay before stylesheet applied on mobile phone

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?

Upvotes: 2

Views: 2198

Answers (4)

Rockbot
Rockbot

Reputation: 973

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.

Upvotes: 0

Robin Rieger
Robin Rieger

Reputation: 1194

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...

Upvotes: 7

Phill Pafford
Phill Pafford

Reputation: 85318

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

Upvotes: 2

Rasmus Bech
Rasmus Bech

Reputation: 84

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

Upvotes: 0

Related Questions