7

backgroundCSSプロパティを使用して、繰り返しのない大きな背景画像をWebサイトに配置しています。画像が非常に大きいため、一部の接続で画像がレンダリングされるまでに長い時間がかかります。

これが私のCSSです：

#wrapper {
    background: url('large-image.jpg) no-repeat center center;
}

Web用に画像を最適化するために、すでに次のことを行っています。

  • 品質を損なうことのない可能な限り低い解像度にそれを減らしました
  • 画像の種類をPNGからJPEGに変更しました
  • 背景画像がなくてもコンテンツが読めるようにページのスタイルを設定

私の質問：画像の読み込み時間をさらに最適化するためbackgroundに、スタイルシートの下部にタグを配置すると違いがありますか？それとも、これによる影響はごくわずかでしょうか？

私はCSSをHTMLの階層順に並べる傾向があるので、#wrapperスタイルはスタイルシートの一番上にあります。ユーザーの接続が遅い場合、スタイルシートのプロパティの順序はロード時間に顕著な影響を与えますか？

4

3 に答える 3

4

スタイルシート内の場所は、ロード時間には影響しません。

ただし、携帯電話など、場合によってはロードされないようにすることができます。

参考： http ：//css-tricks.com/snippets/css/media-queries-for-standard-devices/

これらのメディアクエリはフェイルプルーフではありませんが、一般的にモバイルデバイスであるより遅いケースの多くをキャッチします。一方、誰かがデスクトップを備えた56kモデムを使用している場合、私はそれについて何をすべきかわかりません（おそらく彼らはそれに慣れています）。

必要に応じて、Jqueryとwaitforimagesを使用して、他のすべての画像の後に確実に読み込まれるようにすることができます。

于 2012-08-06T21:50:49.507 に答える
3

認識される読み込み時間に影響を与える可能性があるのは、初期の#wrapper可用性です。つまり、初期読み込み時にページの一部ではなく、JSで追加された場合、背景画像の読み込みは開始されませんが、これが一般的なシナリオになるとは思えません。

背景画像の読み込みはdomreadyハンドラーには影響しませんが、背景の可用性を高速化したい場合は、次のことを試すことができます。

#wrapper {
    background: url(large-image.png) no-repeat center center,
                url(small-image.png) no-repeat center center;
}

mdnから：

CSS3を使用すると、要素に複数の背景を適用できます。これらは、最初に提供した背景を上に、最後の背景を後ろにリストして、互いに重ね合わせます。最後の背景のみに背景色を含めることができます。

これにより、高価な高解像度の画像を読み込んでいる間に、背景の最下層として低解像度の画像を効果的に読み込むことができます。古き良き時代を覚えていlowsrcますか？これが、私たちがシミュレートしている動作です。低解像度と高解像度の両方の画像のダウンロードが同時に開始されることに注意してください。したがって、これは、大きな画像が本当に耐えられないほど大きい場合にのみ使用してください。

また、画像を最適化したと言っています。私はまだYahooSmushItを試してみることをお勧めします、品質を損なうことなくPNGからmuich冗長データを取り除くことができる方法に驚かれることでしょう（私は現在彼らのサービスを使用して断続的な問題を抱えていますが、それは数回の試行後に機能します、あるいはあなたはOptiPNGを使うことができますただし、単一のイメージ用にセットアップして構成するのは非常に手間がかかります）

アップデート：

domreadyが起動するのを待って、を使用してスタイルを追加することをお勧めします$("#wrapper").css(...);。これは、要素にインラインスタイルを追加することです。これにより、1）セレクターの特異性が妨げられます。2）この特定のインスタンスにのみ適用されます#wrapper（たとえば、サーバーからのajaxコンテンツの一部である場合は不適切です）。

または、実行時に新しいcssルールを追加することもできます。

$('head').append('<style type="text/css">#wrapper {background: url(large-image.jpg) no-repeat center center;}</style>');

これは、ドキュメントのスタイルシートに有機的に追加され、の将来のすべてのインスタンスに適用さ#wrapperれるだけでなく、セレクターの特異性を妨げることもありません。（ハンドラーが起動されてスタイルが適用される前に）スタイルが設定されていないコンテンツが短時間点滅することになりますので、このアプローチは推奨しません。

于 2012-08-06T22:39:02.157 に答える
1

この前の質問を参照してください。CSSスタイルシートは、ページが表示される前に完全に読み込まれて評価されるため、背景画像のCSSの場所はスタイルシート内で重要ではありません。

残りのコンテンツが表示された後にのみ画像をロードする場合は、jQueryを使用できます。

$(window).load(function(){
    $("#wrapper").css({'background-image':'url("large-image.jpg")', 'background-repeat':'no-repeat', 'background-position':'center center'});
});
于 2012-08-06T21:46:45.690 に答える