Javascript/CSS load and append to document

Question

I have written a jQuery plugin, but I want it to check if jQuery has been loaded, if not then load it, as well as a couple of other javascript files and also check if CSS file has been loaded, if not then load it.

Am wondering how to go about it?

thank you very much for your time.

Eli Grey · Accepted Answer · 2009-08-27 04:03:39Z

2

To detect if CSS is loaded

Add this to your CSS:

._css_loaded_test {
  display: none;
}

Define this JavaScript function:

function cssIsLoaded() {
  var test = document.createElement("div");
  test.className = "_css_loaded_test";
  return getComputedStyle(test, null).display === "none";
}

To detect if jQuery is loaded

Use this JavaScript to detect if jQuery is loaded:

if (typeof jQuery !== "undefined") {
  // put your code here
}

edited Aug 27, 2009 at 4:03

answered Aug 23, 2009 at 17:16

Eli Grey

36k14 gold badges80 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amir Over a year ago

I don't care about ie either :) but I don't think getComputedStyle() will work on ie8 and before. Maybe use currentStyle - see: quirksmode.org/dom/w3c_css.html#t01

Justin Meyer · Accepted Answer · 2009-08-22 09:19:01Z

0

Your plugin, unless it is comparable to jQuery in size and complexity, should probably not be loading jQuery. I think simply checking if jQuery is present, and throwing a warning if it is absent is sufficient for any developers to understand what is happening.

I suppose you could be working on a plugin that people will often include without 'knowing' if they have jQuery or not.

answered Aug 22, 2009 at 9:19

Justin Meyer

1,68714 silver badges15 bronze badges

Comments

Jonathan Fingland · Accepted Answer · 2009-06-02 05:07:55Z

-1

The following should work. It may not be entirely optimized, though.

if (typeof jQuery == "undefined") {
    var js = document.createElement("script");
    js.setAttribute("src",...path to jquery...);
    js.setAttribute("type","text/javascript");
    document.head.appendChild(js);
    //ditto for other files you mentioned 
}

function isCSSLoaded(uri) {
    var links = document.getElementsByTagName("link");
    for (var i =0, len = links.length; i<len;++i) {
        if (links[i].getAttribute("src") === uri) return true;
    }
    return false;
}

if (isCSSLoaded(...pathToYourCSSFile...) {
    var css = document.createElement("link");
    css.setAttribute("href",...path to css file...);
    css.setAttribute("media","screen");
    css.setAttribute("rel","stylesheet");
    css.setAttribute("type","text/css");
    document.head.appendChild(css);
    //ditto for other files you mentioned 
}

EDIT: note the above only applies to CSS loaded via links, and not those using @import

answered Jun 2, 2009 at 5:07

Jonathan Fingland

57.3k11 gold badges89 silver badges79 bronze badges

1 Comment

Eli Grey Over a year ago

Your isCSSLoaded loaded function does not check whether or not the CSS has been loaded, only that a <link> tag is present with a specified src. If I create a link tag progmatically and put it in the document with the src, X, and use your function right away it will falsely say that the CSS is loaded.

Collectives™ on Stack Overflow

Javascript/CSS load and append to document

3 Answers 3

To detect if CSS is loaded

To detect if jQuery is loaded

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

To detect if CSS is loaded

To detect if jQuery is loaded

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related