Can I load external stylesheets on request?
$.getScript('ajax/test.js', function() {
alert('Load was performed.');
});
.. like the above code which loads an external JS on request, is there something similar available to load an external CSS stylesheet when required?
Like for example when I use lightboxes (inline popups) on my site, I want to avoid loading lightbox JS and CSS files onload, unless requested by the user.
Thanks
Solution 1:
Yup: if you create a <link> tag linking to a stylesheet and add it to the <head> tag, the browser will 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 work in IE 8 or under — there, you need to either:
- append the
<link>before setting itshref; or - use IE’s
document.createStyleSheet()method
Also, checking whether a link has already been added doesn’t work reliably across all browsers.
I would also question part of your premise:
I want to avoid loading lightbox JS and CSS files onload, unless requested by the user.
Why? To reduce page weight? I can understand the desire, but you should measure the size of your CSS and JS files (after minification and gzipping) with the lightbox code in there, and without, to 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 minification and gzipping, there may well not be that much difference.
And bear in mind that you can instruct the browser to cache your CSS and JS for a long time, meaning it only gets downloaded when a user visits your site with an empty cache.
Solution 2:
$('<link/>', {rel: 'stylesheet', href: 'myHref'}).appendTo('head');
Solution 3:
You could do:
$('<link>').attr('rel','stylesheet')
.attr('type','text/css')
.attr('href','link_to.css')
.appendTo('head');
Solution 4:
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.