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

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

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

спасибо!

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

28
css javascript jquery-deferred

5 ответов

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

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

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

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

48

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

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;
}
18

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

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

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

0

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

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;
}
0

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

ex. http://domain.com/100x100.jpg?201611

0