サイト内のページに飛ぶときの背景に関する異常

（以下、一部分だけ取り出した記述です。）

body{
background-color:#ffffff;
background-image:url(bg.jpg);
}

#page{
width:960px;
background-color:#ffffff;
}
========================================
【質問】
オフライン上ですが、以下のような症状が出ます。
考えられること、原因になりうる要素に思いあたることがあったら何でもいいので
教えてください。

【状態】
サイト内の他のページにリンクで切り替わるとき、あるいはTOPページに戻るとき、ブラウザの更新ボタンを押したとき、正確にはクリックしたマウスのボタンをはなした瞬間）など、ページを読み込むときに一瞬（まばたきのタイミング）ですが背景色の白（#ffffff）がチカッと表示され、その後画像が表示されるという状況です。

background-colorを白ではなく、緑に設定するとマウスを離した瞬間緑色が表示され、すぐに背景画像（ここではbg.jpg）が表示されます。

背景画像と同じ系列の色で背景色を指定してもやはり、一度background-colorが実施されたあとに背景画像が表示されている（ような感じ）のが目視できます。


【試してみたこと】
●background-colorとbackground-imageの記述順を変えてみた。
●background-colorの記述を取り、background-imageだけにしてみた。
●background-repeatを記述したり、消してみたりした。
●背景画像をjpgではなくgifのもので試してみた。
●背景画像のサイズを（たとえば）200X140とか1200×800などと変えてみた。

【マシン、作成環境】
Windows7（64ビット）、メモリ8Gのノートマシン。
ホームページ作成ソフトはいっさい使用していない（メモ帳のみで手打ち）。

No.2 ベストアンサー 回答者： ORUKA1951 回答日時： 2012/09/17 09:53

画像が大きい場合には必ずそうなります。

　ブラウザは逐次表示が必須とされています。転送や処理が間に合わないときも可能なものから順次表示すべきであることは、理解できると思います。
　画像を単色でシンプルなGIFなどにすると、その症状は実感できないと思います。逆に極めて大きな画像を背景にすると描画に時間がかかります。
　プログレッシブJPEGにするとかも良いでしょう。(画像によると逆効果の場合も)

　いずれにしても背景画像はユーザーにとっては邪魔以外の何者でもないので可能な限りデータ量は小さくしましょう。背景画像を見に来る人はいない。

この回答へのお礼

ありがとうございます。画像の大きさなどに原因があるんですね。今のマシンは性能がいいのでkbあたりの画像はすいすい表示できるものと思い込んでいました。このような症状になったら画像を変更するか背景色で検討します。
「背景画像を見に来る人はいない」というお言葉にはあたりまえのことながら改めて気づかされました。本当にそうです。そうなんですよね。

お礼日時：2012/09/17 10:45

No.1 回答者： slime331 回答日時： 2012/09/17 09:21

body{

background-color:#ffffff; ←削除
background-image:url(bg.jpg);
}

#page{
width:960px;
background-color:#ffffff;　　　　←削除
}
========================================

で、どうですか？

この回答へのお礼

さっそくの回答をありがとうございます。
「背景に画像を使うときは、もし画像が表示されなかったときのことも考慮し、サイト全体のイメージを損ねない背景色をあわせて記述しておく」ということで（指導を受けたので）並記しました。
でも、削除して改善できれば取っちゃおうかと思ったのですが、取っても変化なしでした。

お礼日時：2012/09/17 10:32