How to use Javascript to check and load CSS if not loaded?

by

Just check to see if a <link> element exists with the href attribute set to your CSS file’s URL:

if (!$("link[href="https://stackoverflow.com/path/to.css"]").length)
    $('<link href="https://stackoverflow.com/path/to.css" rel="stylesheet">').appendTo("head");

The plain ol’ JS method is simple too, using the document.styleSheets collection:

function loadCSSIfNotAlreadyLoadedForSomeReason () {
    var ss = document.styleSheets;
    for (var i = 0, max = ss.length; i < max; i++) {
        if (ss[i].href == "https://stackoverflow.com/path/to.css")
            return;
    }
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = "https://stackoverflow.com/path/to.css";

    document.getElementsByTagName("head")[0].appendChild(link);
}
loadCSSIfNotAlreadyLoadedForSomeReason();

More Related Contents:

  1. When we using alert vs popup div tag? [closed]
  2. How to hide css and js version details from weppalyzer in PHP
  3. How to do this mouse over effect in jquery?
  4. How to make page loaders/animations/transitions
  5. Download the text over image using jquery
  6. CSS for background changing over time [duplicate]
  7. toggle show/hide div with button?
  8. Replacing css file on the fly (and apply the new style to the page)
  9. Dynamically loading css stylesheet doesn’t work on IE
  10. How to silently hide “Image not found” icon when src source image is not found
  11. How to close an open collapsed navbar when clicking outside of the navbar element in Bootstrap 3?
  12. Use images like checkboxes
  13. Setting CSS value limits of the window scrolling animation
  14. Stop fixed position at footer
  15. How to add anything in through jquery/javascript?
  16. How can I generate the opposite color according to current color?
  17. scrollTop animation without jquery [duplicate]
  18. How to swipe top down JQuery mobile
  19. Setting a length (height or width) for one element minus the variable length of another, i.e. calc(x – y), where y is unknown
  20. Jquery: How to check if the element has certain css class/style
  21. jQuery: Slide left and slide right
  22. TypeError: $(…).modal is not a function with bootstrap Modal
  23. How to show hidden divs on mouseover?
  24. Rotate div text after clicking on button using jquery and css
  25. How do I find which JavaScript is changing an element’s style?
  26. How to Bootstrap navbar static to fixed on scroll?
  27. How to use pagination on HTML tables?
  28. how to use html2canvas and jspdf to export to pdf in a proper and simple way
  29. How can I reorder elements with JavaScript?
  30. Can you have multiple lines in an element?

Leave a Comment