10

Webページに3つのスクリプトをロードし、そのうちの2つがロードを完了したら、関数をトリガーしたいと思います。

 head.js(
     { webfont: 'http://ajax.googleapis.com/ajax/libs/webfont/1.0.31/webfont.js' },
     { jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' },
     { analytics: 'http://www.google-analytics.com/ga.js' }
 );

理想的には次のことができるようにしたいと思いますが、ドキュメントによると、head.ready（）に2つのスクリプトがロードされるのを待たせることはできないようです（スクリプトの構成を参照）。

head.ready('jquery', function() {
    // Code that requires jQuery.
});

// This is not supported. :-(
head.ready('jquery', 'analytics', function() {
    // Code that requires both jQuery and Google Analytics.
    // ...
});

では、これをどのように解決すればよいですか？準備ができたメソッドをネストした場合、コードがトリガーされることを確認できますか、それともjqueryが分析の前にロードを完了した場合にのみトリガーされますか？

head.ready('jquery', function() {
   // Code that requires jQuery.
   // ...
   head.ready('analytics', function() {
       // Code that requires both jQuery and Google Analytics.
       // ...
   });
});

別の解決策は、このように、ロードステートメントを2つの部分に分割することです。しかし、スクリプトの非同期ロードから完全に恩恵を受けるのでしょうか、それともjqueryと分析の前にWebフォントのロードを完了するのでしょうか？

 head.js(
     { webfont: 'http://ajax.googleapis.com/ajax/libs/webfont/1.0.31/webfont.js' }
 );

 head.js(
     { jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' },
     { analytics: 'http://www.google-analytics.com/ga.js' },
     function() {
         // Code that requires both jQuery and Google Analytics.
         // ...
     }
 );

 head.ready('jquery', function() {
     // Code that requires jQuery.
     // ...
 });
4

1 に答える 1

11

スクリプトは（並列にロードされていても）順番に実行されるため、「最後の行」であったスクリプトを待つことができます。

head.js(
    { webfont  : 'http://ajax.googleapis.com/ajax/libs/webfont/1.0.31/webfont.js' },
    { jquery   : 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' },
    { analytics: 'http://www.google-analytics.com/ga.js' }
);

 head.ready('analytics', function() {
    // when this triggers, webfont & jquery will have finished loading too
 });
于 2012-11-16T10:25:44.770 に答える