2

我在我的文档头部加载 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 开发工具中，带有条件加载脚本的脚本标记被动态附加到我放置modernizr 脚本的任何元素中。如果modernizr 脚本在头部，则生成的脚本标记出现在IE 开发工具中的头部。如果我把它放在正文中的modernizr 调用中，生成的脚本就会出现在正文中。

但问题似乎是插件脚本被放置在jquery 脚本之前。而且插件需要jquery才能工作。尽管我在标记中的 jquery 脚本标签之后编写了modernizr 脚本标签，但在 jquery 脚本之前将后备“nope”脚本注入到页面中。嗯？

我仍在适应异步的工作。有人可以解释如何解决这个问题吗？（无论如何，我总是需要为页面上的其他元素调用 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 之前，一次在之后。（！）它看起来像这样：

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

帮助？

4

1 回答 1

4

好吧，你已经解决了这个问题。问题是 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'
    }
 ]);
于 2012-07-09T19:42:42.827 回答