HTML5のWebAppがあります。
ここにリンクがあります
Webページ全体を非同期でロードしたかったのです。ウェブページにアクセスしたときのように、読み込み中の画像をユーザーに表示したいのですが、ページはバックグラウンドで非同期モードで完全に読み込まれます。スクリプトを非同期でロードしようとしましたが、動作にはあまり影響しません。
これが可能な方法はありますか?
HTML5のWebAppがあります。
ここにリンクがあります
Webページ全体を非同期でロードしたかったのです。ウェブページにアクセスしたときのように、読み込み中の画像をユーザーに表示したいのですが、ページはバックグラウンドで非同期モードで完全に読み込まれます。スクリプトを非同期でロードしようとしましたが、動作にはあまり影響しません。
これが可能な方法はありますか?
背景セットとして読み込み中の画像のみを持つ空のボディをレンダリングします...頭の中には、dom readyでajax呼び出しを実行し、目的のコンテンツを読み込むスクリプトタグがあります...
編集:もちろん、必要なコンテンツには、必要な他のすべてのマークアップとスクリプトタグが含まれている必要があります...その後、応答で本文を更新します
document.body.innerHTML = request.responseText;
編集2:定義されたURLへのクリーンな(クロスブラウザのajaxが機能している場合でも)呼び出しを行うために必要なのは1kb未満であるため、ネイティブjavascriptでそのヘッドスクリプトを記述することをお勧めします... ajax応答では、何も起こらないと確信できます上書きまたは2回ロードされる(ライブラリをロードする場合のajax機能以外)
TobiasKroghが提案したのと同じ方法を使用してみてください。
しかし、プレーンな古いJSを使用してコンテンツを#mainに入れるのではなく
document.body.innerHTML = request.responseText;
Jqueryを使用して、.html()を使用してコンテンツを本文に配置します
$("body").html(request.responseText);
編集:そして、JSローダーを使用してCSSとJSをロードします。非同期でロードするためのLazyloadまたはYepNopeの可能性。それは仕事をするはずです!
これを行うには、cssにローダーを使用して何らかのオーバーレイを設定します。これは(最初は)表示され、後でページが完全に読み込まれた後、javascriptingでオーバーレイを削除(フェードアウト)します...
このようなものhttp://jsfiddle.net/6Ldyd/
もちろん、ページの最後の要素がロードされた後にオーバーレイを削除するための何らかのコールバック関数を作成する必要があります(または最後の要素がロードされた後にそれを呼び出すスクリプト)