1

ページごとに異なる大きな（60-100k）背景画像を使用するサイトがあります。

ユーザーが最初にページを読み込むと、最初にページコンテンツが読み込まれ、しばらくすると背景画像が表示されます。これは、ブラウザでの意図された動作ですが、低速の接続ではページの読み込みが非常に「ゴツゴツ」に見えるようになります。

背景画像が読み込まれたときにJSによって削除される読み込み中の「マスク」でページを非表示にすることを考えていました...しかし、これはまだかなり醜いアプローチです。

ページのコンテンツと背景画像が同時にユーザーに表示されるようにするにはどうすればよいですか？

4

3 に答える 3

4

ここでの最善の解決策は、その画像を小さくする方法を見つけることです。そこにいくつかの優れた圧縮ツールがあります。ImageMagick、いくつかのJPEG固有のツール（http://jpegclub.org/）またはPNG固有のツール（http://www.aboutonlinetips.com/optimize-and-compress-png-files/）を確認することをお勧めします。

しかし、具体的に求めていることを実行するには（準備ができるまでページ上のすべてを非表示にしてからロードする）、jQueryを使用して次のようにすることができます。

$(function(){
    var bgimage = new Image();      
    bgimage.src="{your giant image's URL goes here}";       

    $(bgimage).load(function(){
        $("body").css("background-image","url("+$(this).attr("src")+")").fadeIn();                  
    });
});

これは、すべての要素がページに読み込まれるまで待機してから、新しいImageオブジェクトを作成します。ソースをより大きな画像ファイルにポイントします。ロードが完了すると、この新しくロードされた画像を使用するように背景を変更します。これは、ブラウザが画像をキャッシュしたため、すぐにロードされるはずです。

準備ができるまでページ上のすべてのコンテンツを非表示にしたい場合に備えて、fadeIn（）があります。これは、あなたが隠されるべきであることを意味します。

何らかの理由で、fadeIn（）は、show（）や、removeClass（）を介して「非表示」クラスを削除するよりもうまく機能します（そのアプローチを採用している場合）。後者の2つのアプローチでは、タグの高さをページのコンテンツに合わせてサイズ変更するように見えるため、背景画像全体が表示されない可能性があります。

正直なところ、私はこのアプローチを本当にお勧めしません：p

少なくとも、準備ができるまでページ上のすべてのコンテンツを非表示にする場合はそうではありません。

これは、部分的に読み込まれた画像が表示されないように、準備ができたときにのみ背景画像を表示するための良いアプローチかもしれません...

読み込みが遅いということは、大きな画像を使用することのトレードオフにすぎません。

于 2010-07-08T17:00:01.820 に答える
1

より良い方法は、おそらくjqueryを使用して、ロードされた背景画像をフェードインすることです。また、ユーザーが次のページをクリックする前に次の画像をプリロードして、さらにスムーズにすることもできます。

画像が表示されるまでコンテンツの表示を遅らせると、ユーザーを苛立たせるだけです。それらは（おそらく）主に情報のためにそこにあるので、そのプロセスを遅らせるものには決して触れないでください。

これの例外は、ウェブサイトについて知らない人々が物事をクリックするためにやって来て、それがきれいに見えること以外は何も気にしない、いくつかの芸術的なファーティウェブサイトです。

于 2010-07-08T16:15:17.513 に答える
1

データURIを使用して、最新のブラウザーでこの問題を軽減し、IE6/7の現在の手法にフォールバックすることができます。

于 2010-07-08T17:20:23.083 に答える