特定のCSS背景画像の読み込みを遅らせる

StackOverflow https://stackoverflow.com/questions/506126

質問

次のような 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;
}
...

の読み込みを遅らせる方法はありますか #big-menuの背景画像。HTML 内のすべての画像や他のすべての CSS 背景（ some-menu そして some-other-menu).

理由は、big-menu.jpg はサイズが非常に重いので、最後に読み込まれるようにしたいからです。結局のところ、これは目の保養として機能するだけであり、それよりも有効に使用できる背景画像は他にもあります。(ボタンに使用されているものなど)

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

役に立ちましたか？

解決

CSSの順序は、最初にロードされたリソースを制御しませんが、既存のスタイルを上書きまたは継承されているものに影響します。

JavaScriptのonloadイベントをお試しください。イベントは、ページがフィニッシュロードされた後にのみ実行します。

function loadBG(){
    document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)";
}
window.onload=loadBG();

他のヒント

これは完璧な解決策ではないかもしれません（CSS背景であり画像ではないため）。 YUI イメージローダー 画像を遅延読み込みする良い方法を提供します。

グループを作成する

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

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

もう 1 つの解決策は、アセットを異なるドメインに分割することです。ブラウザは一度に 2 つのアセットのみを要求し、1 つのアセットがロードされるのを待ってから次のアセットを開始します。これは次のように観察できます ファイアバグ そして Y遅い, したがって、いくつかのアセットをimages.example.comとimages1.example.comに配置して、それが影響を与えるかどうかを確認してください

とは思わない配置にstyelsheet影響するので、要素の順番の適用を決定する画像を読み込まれます。

を使用できる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");

CSSで画像のロードが本当にできない場合の制御。あなたは、あなたのスタイルシートの一番下にそれを置くことを試みることができるが、私はあなたが改善を参照してくださいよ疑うます。

ダウンロードの順序は、CSSを使用することによって制御することができません。しかし、あなたはこれを達成するためにJavaScriptを使用することができます。

直接多分あなたはsmush.itたり、お気に入りの画像プログラムを使用してイメージをoptmize必要があることを行う前に、質問に関連していないが、

私は85％の画質で保存されたとき、JPEGファイルが非常によく見ることがわかります。実験と長期間のキャッシュイメージにWebサーバーを設定し、その後、問題は自分のユーザーがサイトにアクセスしてください最初の時間になります忘れないでください。

ジェイソンのJavascriptのトリックは、この問題を解決するには私のために働きました。しかし、私は少し構文を修正する必要がありました。

function loadBG(){
     document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)";
}
window.onload=loadBG();
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top