Фон мигает при загрузке на мгновение

Question

У меня есть div (.header), содержащийся в других div. Когда моя страница загружается, на мгновение только этот один .header div «мигает» белым при загрузке страницы, особенно в Firefox, но немного в IE8. Я не могу найти, какой тип CSS или его отсутствие вызывают это - нет никаких изображений или цвета фона, связанных с этим div. Внутри .header есть logo.png. Мысли

http://dev.bwmsnow.co.nz/

Answer 1

Если я понимаю вопрос, я предлагаю старый прием добавления цвета фона, аналогичного фоновому изображению, к <div class="header">, чтобы при загрузке страницы (но до загрузки изображения) пользователь видел цвет, аналогичный изображение на заднем плане. Таким образом, визуальное влияние загрузки изображения не так заметно.

I Фотошоп глаза опустил фоновое изображение и предлагает использовать #a1dff8 в качестве цвета. CSS для должен быть:

.header{<br> background:#a1dff8 url('images/yourheader.png');<br> }

Также, глядя на ваш код, я вижу, что у вас есть несколько внешних файлов JS. Вы должны рассмотреть минификатор. Просто Google или StackOverflow для минимизации JS / CSS.

Answer 2

Из того, что я вижу (Firefox в XP), он не столько мигает, сколько кажется, что он медленно загружает div заголовка-контейнера и связанные фоновые изображения. Если я загружаю без кеша, вся панель логотипа загружается последней (и перед загрузкой отображается белым цветом), а не только один div. YSlow насчитывает около 50 HTTP-запросов, которые могут объяснить некоторые из них. Не похоже, что страница настолько большая, что состоит из множества частей, которые, вероятно, создают некоторое отставание в обработке.