5

このようなCSSで：

...
#big-menu {
    background: #fff url(../images/big-menu.jpg) no-repeat;
}
#some-menu {
    background: #fff url(../images/some-menu.jpg) no-repeat;
}
#some-other-menu {
    background: #fff url(../images/some-other-menu.jpg) no-repeat;
}
...

の背景画像の読み込みを遅らせて、HTML 内のすべての画像と他のすべての CSS 背景 (と)#big-menuを含む他のすべての後に読み込まれるようにする方法はありますか?some-menusome-other-menu

その理由は、big-menu.jpg のサイズが非常に重いため、最後にロードする必要があるためです。結局のところ、それは単に目を楽しませるだけであり、それよりも優れた用途を持つ他の背景画像があります. (ボタンに使われているものなど)

CSS に配置する順序または#big-menuHTML のマークアップ () の出現は、最初に読み込まれるものと関係がありますか? またはそれを制御するためのより信頼できる方法はありますか? javascript (jQuery を推奨) で問題ありません。

4

7 に答える 7

8

css の順序は、どのリソースが最初に読み込まれるかを制御しませんが、上書きまたは継承される既存のスタイルに影響を与えます。

JavaScript onload イベントを試してください。イベントは、ページの読み込みが完了した後にのみ実行されます。

function loadBG(){
    document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)";
}
window.onload=loadBG();
于 2009-02-03T06:33:21.393 に答える
4

もう 1 つの解決策は、資産を異なるドメインに分割することです。ブラウザーは一度に 2 つの資産のみを要求し、1 つの資産が読み込まれるのを待ってから次の資産を開始します。これはFirebugとYSlowで確認できるので、いくつかのアセットを images.example.com と images1.example.com に配置して、影響があるかどうかを確認してください。

于 2009-02-05T08:06:59.503 に答える
4

これは完全な解決策ではないかもしれませんが (これは css バックグラウンドであり、画像ではありません)、YUI 画像ローダーは画像を遅延読み込みする優れた方法を提供します。

グループを作成する

var imgGroup = new YAHOO.util.ImageLoader.group(window, 'load', 2);

ドキュメントが読み込まれた後、2 秒後に画像が読み込まれます。ヤフー！Shineまたはデモの例。

于 2009-02-03T14:34:05.370 に答える
2

それらが適用される要素の順序によって、どの画像が最初にロードされるかが決まるため、スタイルシートへの配置が影響するとは思いません。

ただし、jQuery を使用して画像を正しい順序で読み込むこともできます。

$('firstElement').addClass('some-menu');
$('secondElement').addClass('some-other-menu');
$('lastElement').addClass('big-menu');

編集: では、クラスを追加する代わりに、実行時に背景画像を追加することをお勧めします。

$('firstElement').css("background-image", "some-menu.jpg");
$('secondElement').css("background-image", "some-other-menu.jpg");
$('lastElement').css("background-image", "big-menu.jpg");
于 2009-02-03T14:15:55.063 に答える
0

CSS で画像をロードするタイミングを制御することは、実際には不可能です。StyleSheet の一番下に配置することもできますが、改善が見られるとは思えません。

于 2009-02-03T12:10:12.493 に答える
0

css を使用してダウンロードの順序を制御することはできません。ただし、JavaScript を使用してこれを実現できます。

質問とは直接関係ありませんが、それを行う前に、smush.it またはお気に入りの画像プログラムを使用して画像を最適化する必要があります。試してみて、Web サーバーが画像を長期間キャッシュするように設定することを忘れないでください。そうすると、ユーザーが初めてサイトにアクセスしたときに問題が発生します。

于 2009-06-02T00:51:16.157 に答える
0

Jason の Javascript トリックは、この問題を解決するのに役立ちました。ただし、構文を少し修正する必要がありました。

function loadBG(){
     document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)";
}
window.onload=loadBG();
于 2012-01-09T14:39:57.017 に答える