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 スクリプトが head にある場合、生成された script タグはIE Dev Tools のヘッド。本文に modernizr 呼び出しを入れると、生成されたスクリプトが本文に表示されます。

しかし問題は、プラグイン スクリプトがjquery スクリプトの前に配置されていることです。また、プラグインが機能するには jquery が必要です。マークアップで jquery スクリプト タグの後に modernizr スクリプト タグを書いていますが、jquery スクリプトの前にフォールバック「いいえ」スクリプトがページに挿入されています。は？

私はまだ非同期の作業に順応しています。誰かがこれを論争する方法を説明できますか? (ページ上の他の要素に対しては常に jquery を呼び出す必要があるため、modernizr テストで jquery の読み込みを条件付きにすることはできません。)

アップデート

さて、今、私はすべてを非同期的に呼び出しています。head 内のスクリプト タグは次のように宣言されます。

<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 スクリプトは生成されたコードに 2 回表示されます。1 回は jquery の前、もう 1 回はその後です。(!) 頭の中はこんな感じ。

<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 に答える