2012-04-22 5 views
4

私はHTML5でWebAppを持っています。ここでWebページを非同期でロードしています

は、私は非同期的に全体のWebページをロードしたいlink

です。 Webページにアクセスするときと同じように、ユーザーに読み込み中のイメージを表示し、ページがバックグラウンドで非同期モードで完全に読み込まれるようにしたいとします。スクリプトを非同期に読み込もうとしましたが、その動作に大きな影響を与えませんでした。

これが可能な方法はありますか。

答えて

1

Tobias Kroghと同じ方法を試してみてください。

むしろ.htmlを使用したボディに内容を置くために、昔ながらのJS

document.body.innerHTML = request.responseText; 

使用のjQueryを使用して#main内のコンテンツを置くよりも()

$("body").html(request.responseText); 

編集: JSローダーを使用してCSS & JSをロードします。 可LazyloadまたはYepNopeが非同期にロードされます。 それは仕事をする必要があります!

+0

問題は解決しましたが、スクリプトに問題があります –

2

あなたは、DOM準備のAJAX呼び出しを行い、所望のコンテンツをロードするスクリプトタグを持って頭の中で唯一の背景セットとしてロードイメージを持って、空のボディ... ...

EDITをレンダリングします:もちろん、所望のコンテンツは、応答で体を更新...必要とされている他のすべてのマークアップとスクリプトタグが含まれている必要があり

document.body.innerHTML = request.responseText; 

EDIT 2:私は、あなただけの必要があるとして、ネイティブJavaScriptでその頭スクリプトを書くことをお勧めしますless < 1kbでクリーンな(ブラウザ間でもajaxを動作させても)定義されたurlを呼び出す...あなたのajaxレスポンスでは、何も上書きされないか、2回ロードされます(ライブラリーをロードする場合にはおそらくajaxの機能に加えて)

+1

私はこれを試しました!しかし問題は、コンテンツが表示されているが、スクリプトはもうページ上で実行されていないということです –

+0

したがって、アプリケーションはもう役に立ちません。 –

0

これは、cssで表示されるローダーと何らかのオーバーレイを設定することで可能ですあなたのページが完全にロードされた後、オーバーレイを削除... javascriptingであなたが最後の要素の後にオーバーレイを削除するには、コールバック関数のいくつかの種類を確認する必要がありもちろんこのhttp://jsfiddle.net/6Ldyd/

よう

何かを(それをフェードアウト)ページの最後の要素が読み込まれた後に呼び出すスクリプト(またはスクリプト)

+0

これはすべての要素をあらかじめロードする必要があります。ボディをajax経由でロードすることは確かに良い選択です。 – gopi1410

+0

cssファイルをページの上部(htmlファイル)に配置し、スクリプトをページ下部に配置すると、ブラウザーが応答データの最初のKBを受信するとすぐにオーバーレイdivがレンダリングされます。したがって、ユーザーはオーバーレイ上のローダーを見て、スクリプト/ htmlの残りの部分が読み込まれるまで待ちます。 – drinchev

関連する問題