基于JQuery插件中测试条件的CSS文件的有条件加载

Question

我正在寻找最佳方法来根据一组特定条件有条件加载某些文件。

我有三个CSS文件和两个JavaScript文件，这我目前正在加载像这样：

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

由于是显而易见的第四个文件是jQuery和第五个是我的jQuery插件。 JQuery插件里面有一系列函数，就像测试一样。 isMobile, isRetina,isPhone等。但是，让我们关注isRetina。

我试图完成如下：

1. 加载jQuery和我的jQuery插件第一
2. 使用isRetina我的jQuery插件内部函数来检查设备是否具有Retina显示屏
3. 负载core.min.css
4. 负载add_regular.min.css如果不是视网膜显示，或负载add_retina.min.css如果视网膜显示

目前我正在加载所有三个CSS文件，我不想这样做，因为我有一堆其他CSS文件，我想加载它们，因为我的JQuery插件确定哪一个最好，根据我的上面的例子。例如，我可能有一个phone.min.css，我想在使用我的插件的isPhone函数进行另一个测试后加载。

我使用YepNope和做这样的考虑：

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

然而，即使上面的方法是正确的，我不知道如何实现document.ready，因为我的插件的构造需要只有在DOM准备就绪时才运行。

我想了解如何使用YepNope或任何其他解决方案来解决此问题。

干杯。

Answer 1

我正要过JQuery的文档为.ready()，显然$(function(){});相当于$(document).ready(function() {});（我不知道我怎么刚发现这个#ScratchingMyHead）。

我还看到这在一个YepNope教程中使用NetTuts +：http://net.tutsplus.com/tutorials/javascript-ajax/easy-script-loading-with-yepnope-js/。

所以我想我前面的代码成为你所看到的下面应该解决的问题：

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

我测试了这一点，并删除此，如果它不能正常工作。

Answer 2

我不确定如何实现document.ready，因为我的插件的构造函数只有在DOM准备就绪时才需要运行。

有两个相关的事件

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

和

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

如果导入的jQuery前等待这些事件之一，我不知道它会产生什么样的影响jQuery的内置$(document).ready /类似。

也就是说，在附加侦听器之前，您可以选择检查document.readyState === 'complete'，以查看是否应立即调用。

Answer 3

不知道我是否正确理解你，但这应该工作。

默认包含此：

<link href="core.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> 
<script type="text/javascript"> 
    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); 
      //Remove the mask here. 
     } 
    }]); 
    // Feel free to call ready() here 
    $(document).ready(function(){ 
     // whatever you want here 
    }); 
</script> 

然后就可以调用ready()根据你的测试输出增加您的特定逻辑。这种方式ready只会在上面加载并执行时触发。