Как сохранить фоновые изображения от «мигания» при загрузке контента?

Question

Я работаю на новом сайте , и у меня повторяющееся фоновое изображение, которое обеспечивает "непрерывный" поток цветов страницы. Визуально он отлично сочетается с контентом, однако, когда страница загружается или когда я переключаюсь на другую страницу, перед загрузкой контента появляется небольшая пауза, когда фоновое изображение видно, вызывая своего рода «мигающий» эффект, который несколько раздражает .

Вот 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; 
                        }

Фоновые изображения очень маленькие - 4 Кб, поэтому мне кажется, что загрузка страниц и переходы могут быть намного более плавными. Буду признателен за некоторые идеи, которые приведут к решению.

Спасибо!

Answer 1

Вы не можете избежать этого, потому что браузер пытается отобразить страницу при загрузке.Но вы можете уменьшить его влияние, так что это не так заметно.

Для этого вы должны сделать заголовок делителем с точными размерами с начала, и сделать его цвет фона таким же зеленым, как у изображения.ширину от начала, чтобы серый цвет не уменьшался при загрузке страницы.

PS. Это одна из причин, по которой рекомендуется указывать размер изображений на странице.,Если вы этого не сделаете, браузер «перезагружает» страницу при загрузке и создает аналогичный эффект мигания.

Answer 2

Вы изучали предварительную выборку?

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

Answer 3

вы можете попробовать jquery preloader для этого.