Dynamic loading of stylesheet using YUI3

Question

I am dynamically loading stylesheets using YUI3 'Get'. which is working flawlessly however, as far as I can tell it doesn't give me any way to set id's for these new stylesheets which is causing the stylesheet to be loaded multiple times as the user navigates around the site.

var css_obj = Y.Get.css(location.pathname+"/../css/"+jta["iss"]+".css");

Does anyone have any other way of doing this so that I can test prior to loading the css, if it has already been loaded?

Thanks

Answer 1

Did you try using your own variable to check if it's already been loaded?

var css_obj;

function LoadCss() {
    if (css_obj == null) {
        css_obj = Y.Get.css(location.pathname+"/../css/"+jta["iss"]+".css");
    }
}

and if you're using jQuery you could write

$(document).ready(function(){ LoadCss(); });

Answer 2

I like Hunter's solution. You do have access to the inserted link node, though, and you can set its id if you wish:

http://ericmiraglia.com/yui/demos/cssid.php

YUI().use("get", function(Y) {

    Y.Get.css("http://ericmiraglia.com/yui/demos/red.css", {
        onSuccess: function(o) {
        o.nodes[0].setAttribute("id", "myElementId");
        alert(o.nodes[0].getAttribute("id"));
    }
});
});