CODEWITHSUNDEEP
javascripthtmlcss
Steve
Steve

Reputation: 4898

Controlling the load order of css files

I'm loading a main.css file after the jquery ui css loads:

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />  <-- jQuery CSS
<link rel="stylesheet" type="text/css" href="CSS/jquery.Jcrop.css" />  <!-- not used here -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="CSS/main.css" />   <-- my main.css

This is the order I want because I overwrite some of the theme styles.

But in reality, the jQuery css loads after main.css because two transfers are forked:

CSS load graph

How can I be sure that my main.css loads after the jQuery theme css?

Thanks

Upvotes: 1

Views: 3210

Answers (3)

Pekka
Pekka

Reputation: 449465

The order they are specified in the HTML file is the only thing that should count for the final result.

Either way: load your jQuery UI CSS from elsewhere, I don't think code.jquery.com is supposed to be used as a CDN.

That should bring down loading times massively. 2 seconds is way too much for a measly style sheet.

Upvotes: 2

Steve
Steve

Reputation: 4898

Sorry. It doesn't really take 2s to load the jquery css. I was reading the timeline wrong. Here's the correct image:

css loading

The jquery-ui.css is only 7.5KB so there's no difference really between the full and min version. All the time is in connecting and waiting.

When I finish developing the 750KB index.php code I'll minify and gzip it to get its time down.

Thanks for your help.

Upvotes: 0

AJC
AJC

Reputation: 69

Also use the minified version if you append .min just before .css you will get the minfied version.

check it out..

http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.min.css

@pekka I think code.jquery can be used as a CDN on the jQuery website in the footer it says CDN: //code.jquery....

Upvotes: 1

Related Questions