javascript - Conditional Loading of CSS files based on test condition in JQuery plugin -

i'm looking best approach conditionally load files based on specific set of conditions.

i have 3 css files , 2 javascript files i'm loading so:

<link href="core.min.css" rel="stylesheet" type="text/css">  <link href="add_regular.min.css" rel="stylesheet" type="text/css">  <link href="add_retina.min.css" rel="stylesheet" type="text/css">  <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery-plugin.min.js"></script> 

as evident fourth file jquery , fifth jquery plugin. inside jquery plugin series of functions tests e.g. ismobile, isretina, isphone, etc. however, let's focus on isretina.

what trying accomplish follows:

1. load jquery , jquery plugin first
2. use isretina function inside jquery plugin check whether device has retina display
3. load core.min.css
4. load add_regular.min.css if not retina display, or load add_retina.min.css if retina display

currently i'm loading 3 css files , wouldn't want because i've got bunch of other css files , want load them jquery plugin determines 1 best per above example. example, might have phone.min.css want load after test using plugin's isphone function.

i'm considering using yepnope , doing this:

<script type="text/javascript" src="yepnope.min.js"></script> <script> yepnope([{     load: ['jquery.min.js', 'jquery-plugin.min.js'],     test : $.myplugin.isretina(),     yep  : ['core.min.css', 'add_retina.min.css'],     nope : ['core.min.css', 'add_regular.min.css'],     complete : function(){        //my jquery plugin constructor here        $(selector).myplugin(options);     } }]); </script> 

however, if above approach correct one, not sure how implement document.ready, plugin's constructor needs run when dom ready.

i ideas on how can pull off using yepnope or other solution.

cheers.

i not sure how implement document.ready, plugin's constructor needs run when dom ready.

there 2 relevant events

window.addeventlistener('load', function () {     // code runs when document+resources have finished loading }); 

and

document.addeventlistener('domcontentloaded', function () {     // code runs when document has finished parsing, before resources loaded }); 

if wait either of these events before importing jquery, i'm not sure effect have on jquery's inbuilt $(document).ready / similar.

that said, have option of checking document.readystate === 'complete' before attaching listeners, see if should invoke straight away.