[ACCEPTED]-Can I load external stylesheets on request?-lightbox

Accepted answer
Score: 70

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


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

However, as per @peteorpeter’s comments, this doesn’t 17 work in IE 8 or under — there, you need 16 to either:

  1. append the <link> before setting its href; or
  2. use IE’s document.createStyleSheet() method

Also, checking whether a link 15 has already been added doesn’t work reliably 14 across all browsers.

I would also question part of your premise:

I want to avoid loading 13 lightbox JS and CSS files onload, unless 12 requested by the user.

Why? To reduce page 11 weight? I can understand the desire, but 10 you should measure the size of your CSS 9 and JS files (after minification and gzipping) with 8 the lightbox code in there, and without, to 7 see whether the reduction is worth:

  1. the added complexity of loading on-demand; and
  2. the slightly reduced responsiveness of the lightbox (because when loading on-demand, the lightbox will have to wait for its own CSS and JS to load before it can do its thing)

After 6 minification and gzipping, there may well 5 not be that much difference.

And bear in 4 mind that you can instruct the browser to 3 cache your CSS and JS for a long time, meaning 2 it only gets downloaded when a user visits 1 your site with an empty cache.

Score: 28
$('<link/>', {rel: 'stylesheet', href: 'myHref'}).appendTo('head');


Score: 12

You could do:



Score: 5

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

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

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

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

Score: 2

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

By 6 that I mean that best practice for static 5 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 4 a user will only ever download a given file 3 once until it changes.

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

Score: 2

IE issues...

I was crashing IE 6,7,8 with

$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'assets/css/jquery.fancybox-1.3.4.css') );

Just 2 copied them into the main sheet to avoid 1 another http req, voila.

Score: 0

We can append it directly by

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


More Related questions