Can I load external stylesheets on request?

by

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="https://stackoverflow.com/questions/2126238/lightbox_stylesheet.css">');

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

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

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

More Related Contents:

  1. Cannot load an external page with jQuery.load into a div in my page
  2. How to load external html into a div?
  3. Load content of a div on another page
  4. jQuery load first 3 elements, click “load more” to display next 5 elements
  5. CORS jQuery AJAX request
  6. Fade in each element – one after another
  7. jQuery load external site page
  8. jQuery: Check if image exists
  9. How do I load an url in iframe with Jquery
  10. Load website into DIV
  11. Calling function after .load (Jquery)
  12. jquery load() strips script tags – workaround?
  13. jquery callback after all images in dom are loaded?
  14. Call external JS file based on “media screen” value
  15. $(this) doesn’t work in a function
  16. Display PNG image as response to jQuery AJAX request
  17. Jquery Multiple load in a DIV
  18. JQuery .load() callback function
  19. What happens when no response is received for a request? I’m seeing retries
  20. How can I get the ID of an element using jQuery?
  21. Difference between $.ajax() and $.get() and $.load()
  22. What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap)
  23. Accessing functions bound to event handlers with jQuery
  24. how to prevent blur() running when clicking a link in jQuery?
  25. adding jQuery click events to dynamically added content
  26. jQuery ajax inside a loop problem
  27. jQuery trigger when 2/3s of div are in viewport
  28. Can Fancybox be responsive only horizontally for tall content?
  29. Force a checkbox to always submit, even when unchecked
  30. What’s faster for including scripts, using CDN (Google) or storing them locally in website’s root?

Leave a Comment