Modernizr的腳本序列和IE9

Question

我加載了jQuery和Modernizr的在我的文檔的頭部這樣yepnope撥打粘貼到它的結束是有條件地加載插件：

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

但插件未在IE9正確射擊。在經歷了很多頭疼之後，我注意到在IE9開發工具中，帶有條件加載的腳本的腳本標籤被動態地附加到我放置modernizr腳本的任何元素上。如果modernizr腳本在頭部，則生成的腳本標籤出現在在IE開發工具的頭。如果我將這個modernizr調用放在body中，生成的腳本會出現在body中。

但問題似乎是插件腳本被放置在之前 jquery腳本。該插件需要jquery才能工作。儘管我在標記中的jquery腳本標記之後編寫了modernizr腳本標記，但是在jquery腳本之前將備用「nope」腳本注入到頁面中。咦？

我仍在適應異步的工作。有人可以解釋如何解決這個問題嗎？ （我總是需要調用反正jQuery的對頁面上的其他元素，所以我真的不能做任何Modernizr的測試加載jQuery的條件。）

UPDATE

好了，現在我（試圖）以異步方式調用一切。在頭部的腳本標籤聲明如下：

<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 Dev Tools中，html檢查器中的腳本仍然以與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' 
    } 
]);