jQuery Mobileスクリプトを非同期でロードしますか？

Question

head.jsの助けを借りて、または別の方法を使用して、スクリプトを非同期的に伴うjQuery Mobileのロードを実装しようとした人はいますか？私はそれを実験していますが、パフォーマンスが大幅に向上しますが、ナビゲーション（特にハッシュ変更されたイベント処理）が中断されているようです。だから私は誰かが彼/彼女の経験を共有できるかどうか疑問に思います。

UPDATE：hashchangedイベントに伴う問題は、別のコンポーネントによって引き起こされることが判明しました。したがって、jQMなどのJavaScriptアセットの非同期読み込みを実装すると、安全で、JSアプリケーションの読み込み時間とパフォーマンスが大幅に向上します。私はそれを達成するためにhead.jsを使用しています。あなたのために最も効果的なものを使うことができます。

Answer 1

使用非同期属性ページにJavaスクリプトを読み込みます。しかし、これは唯一の詳細は、これはRequireJSのようなパッケージがあるため、正確に何である

http://www.w3schools.com/tags/att_script_async.asp

Answer 2

このリンクを参照してくださいための近代的なブラウザ（HTML5の）でサポートします。 RequireJSのようなモジュールローダーを使用すると、複数のJSファイルを非同期にロードし、ファイルがロードされたときのコールバックを定義できます。

はここで...

の代わりにあなたのjQuery、および/または他のJSファイルをロードする簡単な例ですが、ロードするだけ<script>はRequireJSスクリプトです。

<script data-main="js/app" src="js/require.js"></script> 

data-main属性は、あなたのRequireJSのコンフィグ設定が含まれてい/js/app.jsでファイルをロードするためにRequireJSに指示します。ここで/js/app.jsの例です。この場合

requirejs.config({ 
    "baseUrl": "js/lib", 
    "paths": { 
     "app": "../app", 
     "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min", 
     "jqueryMobile": "//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min" 
    } 
}); 

// Load the main app module to start the app 
requirejs(["app/main"]); 

は、/js/app.jsは、パスを設定するために主に使用されます。 appプロパティはどこ特定のアプリJSを検索する場所をRequireJSを伝え、jqueryプロパティは、jQueryのためのGoogleのCDN URLへのRequireJSパスを伝えます。最後に、requirejs()メソッドを使用して、アプリケーション.jsファイルを読み込みます。すべてのパスが.jsのままであることに注意してください。この時点でRequireJSで

はapp/main.jsであなたのapp JSを探すために起こっています。 というファイルをmain.jsという名前で作成します。ファイルは/js/app/main.jsです。

このファイルには、非同期で、GoogleのCDNからjQueryとjQueryのモバイル両方のファイルをロードし、あなたのアプリケーションロジックの残りの部分を含むように起こっています。ここで/js/app/main.jsの例です：

これはどのような影響を持っているん

define(["jquery", "jqueryMobile"], function($) { 
    //jQuery and jQuery Mobile have been loaded. 
    $(function() { 
     // Do stuff with jQuery and jQuery Mobile 
    }); 
}); 

？ファイルがロードされているかを確認するために、ネットワークの滝を見てみましょう：

上記の図は、jQueryとjQueryのモバイルの両方が非同期読み込みを示しています。同様のデモについては

は、RequireJS jQuery exampleを参照してください。これは、トリガすることができ

var script = document.createElement('script'); 
script.onload = function() { 
    alert("Script loaded and ready"); 
}; 

script.src = "http://whatever.com/the/script.js"; 
document.getElementsByTagName('head')[0].appendChild(script); 

しかし、あなたがしたいイベント：

Answer 3

私はあなたが使用することができますね。

は、ここでそれを発見：document.createElement("script") synchronously