Best IT Recipes

Can I load external style sheets upon request?

$.getScript('ajax/test.js', function() { alert('Load was performed.'); });

.. like the above code that loads external JS on demand, is there something similar for loading an external CSS stylesheet when necessary?

Like, for example, when I use lightboxes (built-in pop-ups) on my website, I want to not load the downloadable JS and CSS files for uploading to the lightbox, unless requested by the user.

thank

+39
jquery external request load lightbox
Jan 24 '10 at 7:00
source share
6 answers

Yup: if you create a <link> that references a stylesheet and add it to the <head> , the browser will load this stylesheet.

eg.

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

However , according to the comments of @peteorpeters , this does not work in IE 8 or lower - you need to either:

  • add <link> before installing href ; or
  • use IE document.createStyleSheet() method

In addition, checking whether a link has been added does not work reliably in all browsers.

I would also question some of your assumption:

I want to not download downloadable JS and CSS files for upload to the lightbox, unless the user has requested.

Why? Reduce page weight? I can understand this desire, but you have to measure the size of your CSS and JS files (after mini-coding and gzipping) using the lightbox code there and without to see if the reduction is worth it:

  • Added on-demand download complexity and
  • slightly reduced lightbox responsiveness (because when loading on demand, the lightbox will have to wait for its own CSS and JS to load before it can do this).

After minimization and gzipping, maybe not so much.

And remember that you can instruct the browser to cache your CSS and JS for a long time, that is, it only loads when the user visits your site with an empty cache.

+52
Jan 24 2018-10-10T00:
source share
 $('<link/>', {rel: 'stylesheet', href: 'myHref'}).appendTo('head');
+25
Oct. 25 '12 at 22:20
source share

You can do:

 $('<link>').attr('rel','stylesheet') .attr('type','text/css') .attr('href','link_to.css') .appendTo('head');
+9
Jan 24 '10 at 7:09
source share

You can add links to external stylesheets by simply adding dynamic HTML content to your head:

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

This content is inserted into the DOM and subsequently displayed normally, in which case a selection of the external stylesheet is called.

Pay attention also to cletus answer, but as if you were not careful with dynamically loading static content, this may cost you the cost of loading the page and over-transferring resources.

+4
Jan 24 '10 at 7:11
source share

As a general rule, it is best for you to include everything you need if you do it right.

By this, I mean that the best practice for static content (images, Javascript, CSS) is as follows:

  • minimize external HTTP requests (minimize the number of files);
  • version of files and use of future futures Expires header;
  • minimize and compress content as needed.

therefore, the user will download only one file only once until it changes.

Dynamic loading of CSS and Javascript, if it is not exceptionally large, is usually unreasonable and counterproductive.

+2
Jan 24 '10 at 7:03
source share

IE problems ...

I crashed IE 6,7,8 using

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

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

+2
Dec 13 '10 at 21:04
source share


More articles:


All Articles