Подтвердить что ты не робот

Как предотвратить белую "вспышку" при загрузке страницы, созданную при задержке загрузки фонового изображения?

Проблема в том, что на большинстве сайтов в Интернете есть фоновые изображения. Они требуют времени для загрузки. Как правило, это не было бы проблемой, если бы изображения были оптимизированы и достаточно небольшими. Тем не менее, на некоторых моих сайтах файлы javascript находят свой путь для загрузки, прежде чем что-либо еще на странице, , даже если они находятся в нижнем колонтитуле! Это создает белую "вспышку" перед загрузкой фонового изображения. Почему загрузка javascript происходит раньше всего? У меня эта проблема на многих сайтах, и я вижу ее повсюду. Здесь сайт, над которым я сейчас работаю:

http://www.bridgecitymedical.com/wordpress/

Спасибо!

tl; dr Как отложить загрузку javascript на своих веб-сайтах так, чтобы фоновое изображение загружалось раньше всего, тем самым предотвращая белую "вспышку" до того, как браузер завершит загрузку изображения.

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

body {
    background: #EDEBED url(myGrayBackgroundImage.jpg);
}

Это просто, практически без затрат, не сломается и не задержит вещи от ненужной загрузки. Похоже, вы уже делаете что-то вроде этого - я бы не изменил его. Я не думаю, что у кого-то есть ожидание того, что ваш сайт будет выглядеть определенным образом до его загрузки.

Ответ 2

Вы можете использовать что-то вроде этого:

HTML

<!-- Add a class to flag when the page is fully loaded -->
<body onload="document.body.classList.add('loaded')">

CSS

/* Hide slider image until page is fully loaded*/
body:not(.loaded) #slider img {
  display:none;
}

Ответ 3

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

<script type="text/javascript" src="/path/to/js/javascript.js"></script>

в нижнем колонтитуле ваших страниц, чтобы он загружался после того, как браузер уже прочитал css и отобразил большую часть страницы. Я понимаю, что это старый пост, но я столкнулся с этим, когда сам думал об этой проблеме и понял (вспомнив разговоры и сообщения, которые я видел раньше), что у меня есть js в моем заголовке.

Ответ 4

Я хотел что-то добавить, если у вас есть черный фоновый рисунок для тела. Я экспериментировал с переходами между страницами на одном сайте. Я, наконец, использовал это (аккуратно загружает черный фон из черного цвета, избегая вспышки да!):

html{
    background-color: black;
}

body{
    -webkit-animation: fadein 1.5s; //I use chrome
    background: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) ), url('wall_pattern.jpg');
    color: white;
}

Ответ 5

Я бы использовал строку запроса "? 201611" в URL-адресе изображения в css. Это указывает браузеру, какая версия изображения загружается. Поэтому вместо проверки новой версии каждый раз она загружает версию, хранящуюся в кеше. Эффект вспышки произойдет только при первом посещении веб-сайта.

ех. http://domain.com/100x100.jpg?201611

Ответ 6

У меня была та же проблема, и мне показалось странным, что об этом больше не говорят. Я до сих пор не нашел никакой документации по этому вопросу, но, пожалуйста, прокомментируйте, если вы найдете что-нибудь касающееся RFC для приоритетов загрузки фонового изображения CSS и т.д.

В любом случае, единственное, что я обнаружил, это то, что <img> загружается сразу, а background-image(), кажется, загружается на DOM, готовом.

Поэтому я решил разместить <img> с display:none как раз перед <div> с фоновым изображением. Это немедленно загрузит изображение, а затем сразу же будет использовано для фонового изображения.

<img src="my-image.jpg" style="display: none;" />
<div style="background-image: url('my-image.jpg');"></div>
  • Стоит отметить, что вы все еще можете мерцать на изображениях, которые не оптимизированы. Поэтому для jpg обязательно сжимайте их и устанавливайте атрибут "прогрессив" при их создании.