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开发工具中的头脑。如果我在体内放置了现代化调用，则生成的脚本会出现在正文中。

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

我还在适应异步的工作。有人可以解释如何纠缠这个吗？（我总是需要为页面上的其他元素调用jquery，所以我不能真正使用任何modernizr测试加载jquery条件。）

更新

好的，现在我（试图）异步调用所有内容。头部中的脚本标签声明如下：

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

scriptloader文件包含：

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相反的顺序出现。更奇怪的是，砌体脚本在生成的代码中出现两次，一次出现在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' } ]);

modernizr脚本序列和IE9

1 个答案: