私はアプリケーションで作業しています
javascript を使用して、ページ内のいくつかの css ファイルといくつかの画像 (サーバーから再読み込み) を変更する必要がありますが、時間がかかり、ページ項目の再読み込みが遅いことは明らかです (接続が遅い場合)。これを行うことは可能ですか?バックグラウンドで処理し、準備ができたらページ全体を表示します??
私はアプリケーションで作業しています
javascript を使用して、ページ内のいくつかの css ファイルといくつかの画像 (サーバーから再読み込み) を変更する必要がありますが、時間がかかり、ページ項目の再読み込みが遅いことは明らかです (接続が遅い場合)。これを行うことは可能ですか?バックグラウンドで処理し、準備ができたらページ全体を表示します??
AFAIUは、非表示のIFRAMEに配置できます。この IFRAME では、onLoad イベントを処理します。ただし、これは読み込みプロセスを高速化するものではなく、ユーザーから非表示にするだけです。
例: longLoad() という名前の長持ちする JavaScript メソッドがあるとします。たとえばhidden.htmlという名前の別の HTML ページに配置する必要があります。
<html>
<script type="text/javascript">
function longLoad() // javascript method here...
{
/// some code here...
}
</script>
<body onLoad="longLoad();">
</body>
</html>
メイン ページ (実際にブラウザーに表示されるページ) は次のようになります。
<html>
<body>
....
.... content
....
<iframe src ="hidden.html" width="100%" height="0">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
ご覧のとおり、IFRAME の高さが 0 に設定されているため、ページ上で非表示になっています。ただし、ユーザーがページをロードすると、非表示の IFRAME もロードされます。また、その onLoad イベント ハンドラも呼び出されます。また、その JavaScript イベント ハンドラーから (DOM ツリーを介して) メイン ページのコンテンツにアクセスして変更することができます。
PS。上記のコードはメモリから記述されていますが、提示されたソリューションは機能します。AJAX が普及するずっと前から使用されていました。
作業中はページ全体を非表示にするか、CSS と画像を読み込んで、すべての素材がクライアントに届いたときにのみ DOM を更新することができます。
新しい Image オブジェクトを作成することで、画像をロードできます。
var img = new Image();
img.onload = function() { /* do something */ };
img.src = "/new/image.png";
「onload」機能は、クライアントが画像ファイルを受信し、表示する準備ができたときに実行されます。したがって、そのように画像をロードするように調整し、「ロード」ハンドラーを使用して準備ができたときに追跡することができます。それらがすべて完了したら、DOM を更新できます。これは非常に迅速に行われるはずです。