Jquery 使脚本序列现代化和IE9_Jquery_Modernizr

Jquery 使脚本序列现代化和IE9

jquery

Jquery 使脚本序列现代化和IE9,jquery,modernizr,Jquery,Modernizr,我在文档的开头加载jquery和Modernizer，如下所示： <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/modernizr-columntest.js"></script> <script src="js/modernizr-columntest.js"></s

我在文档的开头加载jquery和Modernizer，如下所示：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/modernizr-columntest.js"></script>

<script src="js/modernizr-columntest.js"></script>
<script src="js/envision-scriptloader.js"></script>

但该插件在IE9中无法正确启动。经过大量的headscratch之后，我注意到在IE9开发工具中，带有条件加载脚本的脚本标记被动态地附加到我放置Modernizer脚本的任何元素中。如果Modernizer脚本位于头部，则生成的脚本标记将显示在IE开发工具的头部。如果我将它放在正文中的Modernizer调用中，则生成的脚本将显示在正文中

但问题似乎是插件脚本放在jquery脚本之前。插件需要jquery才能工作。即使我在标记中的jquery脚本标记之后编写Modernizer脚本标记，回退“nope”脚本也会在jquery脚本之前注入页面。嗯

我仍在适应异步的工作。有人能解释一下如何解决这个问题吗？（我总是需要为页面上的其他元素调用jquery，所以我不能在任何modernizr测试中设置加载jquery的条件。）

更新

好吧，现在我（试着）把一切都称为非同步的。头部中的脚本标记声明如下：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/modernizr-columntest.js"></script>

<script src="js/modernizr-columntest.js"></script>
<script src="js/envision-scriptloader.js"></script>

但令人困惑的是，砖石插件根本不会着火。在IE9dev工具中，html检查器中的脚本仍然以与jquery相反的顺序出现。更奇怪的是，砌体脚本在生成的代码中出现了两次，一次在jquery之前，一次在jquery之后。（！）头上看起来是这样的：

<script src="js/jquery.masonry.min-pluscall.js"></script>
<script src="js/jquery-smoothscroll.js"></script>
<script src="js/jquery.colorbox-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.masonry.min-pluscall.js"></script>
<script src="js/modernizr-columntest.js"></script>
<script src="js/envision-scriptloader2.js"></script>

帮助？

好吧，你已经想到了这个问题。问题是jQuery是同步加载的，而插件是异步加载的，在IE中，插件恰好是先加载的，但实际上，这可能发生在任何浏览器的任何一点上。解决方案是异步加载jQuery，然后在

complete

分支中加载插件：

Modernizr.load({
    load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
    complete: function(){
        Modernizr.load({
            test: Modernizr.csscolumns,
            nope: 'js/jquery.masonry.js'
        });
    });
});

编辑

实际上，从技术上讲，你所需要做的就是把它们按顺序排列。这也会起作用：

Modernizr.load([
    'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
    {
        test: Modernizr.csscolumns,
        nope: 'js/jquery.masonry.js'
    }
 ]);

嗯，你说到这个问题了。问题是jQuery是同步加载的，而插件是异步加载的，在IE中，插件恰好是先加载的，但实际上，这可能发生在任何浏览器的任何一点上。解决方案是异步加载jQuery，然后在

complete

分支中加载插件：

Modernizr.load({
    load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
    complete: function(){
        Modernizr.load({
            test: Modernizr.csscolumns,
            nope: 'js/jquery.masonry.js'
        });
    });
});

编辑

实际上，从技术上讲，你所需要做的就是把它们按顺序排列。这也会起作用：

Modernizr.load([
    'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
    {
        test: Modernizr.csscolumns,
        nope: 'js/jquery.masonry.js'
    }
 ]);

谢谢你，克里斯。我想使用async要么全是，要么全是，如果我要使用它，我必须把所有东西都放到

modernizer.load

。一个必然的问题：我该如何处理特定于页面的内联代码、特定于页面的全局变量等？有“最佳实践”吗？老实说，在真实场景中很难处理异步JS。我所做的是永远不会在页面本身上使用它，而只是在同步加载的JS文件中使用它。我有一个用于jQuery的脚本标记，一个用于通用插件（组合和缩小），一个用于应用程序范围的JS——都是同步的。在应用程序范围的JS中，我可以使用

Modernizr.load

有条件地异步加载其他库，这不是问题，因为代码所在的文件是在jQuery.com之后同步加载的，但这正是我的问题，不是吗？我加载了jquery（我想是同步加载的）。然后我加载了Modernizer（如果我没弄错的话，也是通过同步调用）。所以我认为异步加载的jquery插件会在jquery之后执行，但它是在jquery之前被注入的，因此不会运行！我接受你的回答，我只是想理解……只要你只在jQuery之后同步加载的JS文件中使用Modernizer，那么在jQuery加载之前就没有办法触发异步。事实上，您已经加载了两次aysnc脚本，这似乎表明它仍然在页面和外部JS中加载。确保在IE中完全清除缓存，最好在IE开发工具的“缓存”菜单下打开“始终从服务器刷新”。谢谢，这非常有用。我还发现在yepnope文档的底部，看到双重请求是正常的。我认为这只是IE inspector中的一些奇怪之处，因为事情现在正在正确执行。谢谢Chris。我想使用async要么全是，要么全是，如果我要使用它，我必须把所有东西都放到

modernizer.load

Modernizr.load