ansaurus

Question

Answer 1

+1 A:

Generally you're better off just including all you need assuming you're doing so correctly.

By that I mean that best practice for static content (images, Javascript, CSS) is to:

minimize external HTTP requests (minimize # of files);
version the files and use a far futures Expires header;
minify and compress content as appropriate.

so a user will only ever download a given file once until it changes.

Dynamically loading CSS and Javascript, unless it is exceptionally large, is typically unwarranted and counterproductive.

cletus 2010-01-24 07:03:52

Answer 2

+3 A:

Yup: if you create a <link> tag linking to a stylesheet and add it to the <head> tag, the browser will (I think) load that stylesheet.

E.g.

$('head').append('<link rel="stylesheet" type="text/css" href="lightbox_stylesheet.css">');

Paul D. Waite 2010-01-24 07:04:58

Yes it will load the stylesheet, but you shouldn't wrap your `link` statement in `$()` just use `lightbox_stylesheet = '<link ... />'` and the `.append()` call will do what is needed. You generally don't want to wrap anything in a jQuery object that cannot be contained in a `div`.

Doug Neiner 2010-01-24 07:08:51

Also, kudos for using a string of HTML vs. the separate `attr` calls. This will be faster (ok, just a smidge) than the separate calls.

Doug Neiner 2010-01-24 07:12:46

Aha, I didn’t realise `append()` took a string of HTML too. Neat.

Paul D. Waite 2010-01-24 08:16:40

Answer 3

+2 A:

You could do:

$('<link>').attr('rel','stylesheet')
  .attr('type','text/css')
  .attr('href','link_to.css')
  .appendTo('head');

Reigel 2010-01-24 07:09:04

Thats more neat!

Nimbuz 2010-01-24 07:10:06

@Reigel I am not sure how that would function cross browser. From my understanding, when you call `$(htmlString)` the element must be able to be contained in a `div` until it is appended to the page. Though a `link` element *can* be in a `div` it is not valid. For instance, you should not use `$('<option>')` because it is only valid in a `select` element. I think that `option` call actually fails in some browsers, so I just want to raise that concern about this method.

Doug Neiner 2010-01-24 07:21:27

I think it’s a bit too obsessive to worry about where the HTML generated by JavaScript might be stored before it’s added to the page. The user’s never going to see that, right?

Paul D. Waite 2010-01-24 08:19:05

Answer 4

+1 A:

You can add references to external stylesheets simply by adding dynamic HTML content in the head:

$('head').append('<link rel="stylesheet" href="style.css" type="text/css" />');

This content gets inserted in the DOM, and subsequently rendered normally, in this case causing a fetch of an external stylesheet.

Pay attention to cletus' answer as well however, as if you're not careful with dynamic loading of static content, it can end up costing you in page load time and excessive resource transfer.

zombat 2010-01-24 07:11:27

Answer 5

A:

@Nimbuz and @Paul D.

Worked like a charm... just wanted to say thanks and add a little extra.

When I implemented your solution it worked the first time in FireFox (Chrome, Safari, Opera), except in IE6/ 7 and 8. It took me a bit to figure out that I needed to use the full absolute path instead of a relative one.

$('head').append('<link rel="stylesheet" type="text/css" href="http://www.mysite.com/lightbox_stylesheet.css"&gt;');

I don't know if this is a unique case or not but I thought I'd share just in-case.

Your friendly neighbourhood, Smccullough

Smccullough 2010-02-11 15:36:54

ansaurus

tags:

views:

answers:

Load external stylesheets on request?

related questions