jquery - Modernizr 脚本序列和 IE9

Question

我正在文档的头部加载 jquery 和 Modernizr，如下所示:

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

“columntest.js”有一些直接来自其生成器的自定义 Modernizr 代码，并在其末尾粘贴了一些 yepnope 调用，有条件地加载插件:

Modernizr.load({
  test: Modernizr.csscolumns,
  nope: 'js/jquery.masonry.js'
});

但是该插件在 IE9 中无法正确启动。经过一番苦思冥想后，我注意到在 IE9 开发工具中，带有条件加载脚本的脚本标记会动态附加到我放置现代化脚本的任何元素中。如果现代化脚本位于头部，则生成的脚本标记将出现在IE 开发工具中的头部。如果我将 Modernizr 调用放入正文中，生成的脚本将出现在正文中。

但问题似乎是插件脚本被放置在 jquery 脚本之前。并且该插件需要jquery才能工作。即使我在标记中的 jquery 脚本标记之后编写了 Modernizr 脚本标记，后备“nope”脚本也会在 jquery 脚本之前被注入(inject)到页面中。啊？

我仍在适应异步的工作。有人可以解释如何解决这个问题吗？ (无论如何，我总是需要为页面上的其他元素调用 jquery，因此我无法真正在任何 Modernizr 测试中以加载 jquery 为条件。)

更新

好吧，现在我(尝试)异步调用所有内容。头部的脚本标签声明如下:

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

脚本加载器文件包含以下内容:

Modernizr.load([
    'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
    {
        test: Modernizr.csscolumns,
        nope: 'jquery.masonry.min-pluscall.js'
    },
    {
        load: ["js/jquery-smoothscroll.js","js/jquery.colorbox-min.js"],
        complete: function() {
            $.colorbox.settings.fixed = true;
                   // MISCELLANEOUS SETTINGS ETC
            $(document).ready(function() {
                $('.thumbnail').colorbox({
                    innerWidth: 800,
                });
            });
        }
    }
]);

但令人困惑的是，砌体插件根本不会触发。在 IE 9 开发工具中，html 检查器中的脚本仍然以与 jquery 相反的顺序显示。更奇怪的是，masonry 脚本在生成的代码中出现了两次，一次在 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>

帮忙？

Answer 1

好吧，你已经谈到这个问题了。问题是 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'
    }
 ]);