ホームページに背景画像をプリロードする

Question

私はdiv（ニュースレターの登録、mysqlデータベースからのコンテンツ、さまざまな静止画像など）を取り込むための膨大な量のPHPコードを含むホームページを持っています。ページ全体は背景のクロスフェードJavaScriptの上に構築されています。

しかし、ページを読み込むときに表示される最後の「div」は背景画像です - すべてのdivが読み込まれるまで効果的に大きな「空白」を作成します背景画像がレンダリングされる。

他のものの前に最初の背景イメージを読み込んで、サイトに移動するときにこの空白が残らないようにする方法はありますか？

私はロールオーバーイメージを使用していますが、ロールオーバーバージョンはスクリプトにプリロードすることができます。これは、このようなソリューションを探す際に最も適した方法でしょうか？

ヘルプやアドバイスをいただければ幸いです。必要に応じてコードを表示することは喜んでできます。私のスクリプトには量があれば役に立たないと思います！

おかげ JD

Answer 1

私はあなたの問題は、画像が読み込まれる順序だと思います。

他のすべての要素の後に背景画像が読み込まれる場合は、できるだけ早く背景画像が読み込まれていることを確認してください。背景画像がCSSプロパティbackground-image：url（myimage.png）のdivである場合は、CSSファイルをheadタグに含めます。

また、背景画像をpng interlacedとして保存することもできます。 （Photoshopの場合：ウェブとデバイスのために保存する> png24>インターレースのティック）。この方法では、画像はすぐに品質が悪くなり、データがブラウザに転送されると改善されます。

jQueryでイメージの読み込みを制御する場合は、この質問をご覧ください。Preloading images with jQueryしかし、あなたの問題は要素がロードされる順序であるので、これがあなたにとって有用であるとは思わない。

Answer 2

JSで画像をプリロードしようとしましたか？

このような何か：

<script type="text/javascript"> 
    bg = new Image(); 
    bg.src="background.png"; 
</script> 

Answer 3

は、httpリクエストを区切ります。

あなたのページは、バックグラウンドイメージを持つページのままであり、要素はわずかです。

javascriptでは、ページの内容を読み込み、このajax関数を$（document）.ready（）関数にフックする（jqueryを使用する場合はwindow.load関数を使用できます）ので、内容ページが読み込まれた直後に読み込まれます。

Answer 4

また、HTML5で指定されたクライアントサイドキャッシュファイルの使用を検討することもできます。
これは完全には解決されませんが、ユーザーがサイトに入ると画像が読み込まれるまで待つ必要がありますが、次回同じユーザーが戻ってくるときには大幅にパフォーマンスが向上します。
詳細はhereをご覧ください。

Answer 5

uはjqueryを使用しているかどうかを指定していません。

jquery コールImage.load機能。そのイメージを読み込んだ後にjsが呼び出すように、すべてのjをコールバックします。

Answer 6

JSを使用せずにこれを行うには、divまたはimgタグをページのbodyの下の最初の項目として含めることができますそのimgタグのスタイルをdisplay：noneに設定します。最初にイメージをロードするので、後で使用するときにロードして表示する準備ができている必要があります。