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

E.g.

$('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:

append the <link> before setting its href; or
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:

the added complexity of loading on-demand; and
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:

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

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' />"));

Source: stackoverflow.com

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

Jquery functions not working in a modal of Bootstrap

Twig variable in external JS file

Spring get files and images from external folder on disk, outside webapps?

window.onload in external script gets ignored in Javascript

What is the purpose of `external` keyword in Kotlin?

Adding External Stylesheet using JavaScript

Nested/Inner class in external file

How do you edit a dependency/external library in android studio?

Use Jinja2 template engine in external javascript file

How to correctly load a stylesheet within the body?