2

私は新しいサイトに取り組んでおり、ページの色の「連続的な」流れを提供する繰り返しの背景画像があります。視覚的にはコンテンツと完全に調和していますが、ページをロードするとき、または別のページに切り替えるときに、この背景画像が表示されているときにコンテンツがロードされる前に短い一時停止があり、一種の「点滅」効果が発生し、ややイライラします. .

CSSは次のとおりです。

html                        { background: #fff url(../_images/bg_html.jpg) repeat-y center top; }

body                        { 
                        font-family: Arial, Helvetica, sans-serif;
                        font-size: .875em; 
                        line-height: 1.333em; /* 16px / 12px = 1.333em */ 
                        color: #000; 
                        background: url(../_images/bg_body.png) repeat-x left top;
                        }
 #container { 
                        width: 980px;  
                        margin: 0 auto; 
                        background: url(../_images/bg_container.jpg) repeat-y left top; 
                        overflow: hidden; 
                        }

背景画像は 4k と非常に小さいため、ページの読み込みとトランジションがよりシームレスになるように思えます。解決につながるヒントをいただければ幸いです。

ありがとう！

4

3 に答える 3

1

読み込まれるときにページをレンダリングしようとするのはブラウザであるため、これを回避することはできません。ただし、その影響を減らすことができるため、それほど目立たなくなります。

そのためには、ヘッダーを最初から正確なサイズのdivにし、背景色を画像と同じ緑色にする必要があります。

また、左側のメニューは最初から正しい幅である必要があります。これにより、ページの読み込み時に灰色の「縮小」が表示されなくなります。

PSこれが、ページ内の画像のサイズを指定することが推奨される理由の1つです。そうしないと、ブラウザはページの読み込み時にページを「リフロー」し、同様の点滅効果を作成します。

于 2010-06-28T11:36:13.827 に答える
0

プリフェッチを検討しましたか？

http://devedge-temp.mozilla.org/viewsource/2003/link-prefetching/index_en.html

于 2010-06-28T11:54:21.867 に答える
0

これにはjquery preloaderを試すことができます。

于 2010-06-28T11:30:04.497 に答える