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

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

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

Спасибо!

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


javascript css jquery-deferred
person alt    schedule 14.09.2011    source источник
comment
Это отличный вопрос, на который не хватает хорошего ответа. Почему? Потому что это ошибка. Где-то между дизайном CSS и браузерами кто-то ошибся. Кажется невозможным отобразить или обновить страницу в Firefox или Chrome, не показывая цвет фона как ошибочный фон каждого элемента div, имеющего фоновое изображение, до тех пор, пока фоновое изображение не будет полностью загружено. Если это фотография, эта загрузка может легко занять 90 мс или больше.   -  person David Spector    schedule 16.04.2021

Ответы (6)


arrow_upward
55
arrow_downward

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

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

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

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

person Surreal Dreams    schedule 14.09.2011
comment
Спасибо! Думаю, я действительно не хочу решения своей проблемы, не так ли. - person alt; 14.09.2011
comment
Я ожидаю, что ничего на экране не изменится после начала загрузки страницы. Иногда ни один сплошной цвет не похож на изображение. Должен быть способ идеальной предварительной загрузки фоновых изображений, но часы поиска не выявили его. Этот ответ не работает для меня в 2021 году, оставляя длинную вспышку указанного цвета. Удалось ли это вам в 2014 году? - person David Spector; 16.04.2021

arrow_upward
22
arrow_downward

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

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;
}
person kbtz    schedule 14.09.2011
comment
Умная! Незначительное улучшение: добавьте пробел в добавленный атрибут className. например document.body.className += ' load'; - person jimbo; 14.09.2011
comment
@jimbo почему именно? - person Kris10an; 24.04.2019
comment
@ Kris10an Первоначально в моем ответе использовалось document.body.className += 'load';, поэтому, если тег body уже имел class="body-class", класс стал бы body-classload. В настоящее время более подходящим способом управления именами классов является classList< /a> список токенов. - person kbtz; 25.04.2019
comment
Такое сумасшествие является одной из причин, по которой даже многие новостные сайты и другие веб-сайты, ориентированные на контент, которые должны нормально работать без сценариев на стороне клиента, больше не работают без включенного JS. - person jbg; 26.11.2019

arrow_upward
2
arrow_downward

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

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

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

<img src="my-image.jpg" style="display: none;" />
<div style="background-image: url('my-image.jpg');"></div>
  • Следует отметить, что вы все равно можете мерцать на изображениях, которые не оптимизированы. Поэтому для jpg обязательно сжимайте их и устанавливайте атрибут «прогрессивный» при их создании.
person ggedde    schedule 07.10.2019
comment
Я не знаю, когда загружаются изображения. Все, что я знаю, это то, что этот ответ не сработал для меня. Вот мой точный код Bootstrap 5: ‹img src=./imat-bagja-gumilar-jwTvCQQJXh0-unsplash.jpg style=display: none;› ‹div class=d-flex flex-column justify-content-center style=background : url(./imat-bagja-gumilar-jwTvCQQJXh0-unsplash.jpg); фоновая позиция: центр; размер фона: обложка; высота:70вх;› - person David Spector; 16.04.2021

arrow_upward
1
arrow_downward

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

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;
}
person adr1Script    schedule 28.09.2016
comment
Неважно, что вы используете. При веб-разработке вы должны сделать ее как можно более кроссбраузерной. - person carefulnow1; 18.03.2017

arrow_upward
0
arrow_downward

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

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

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

person Robert McMahan    schedule 12.10.2015
comment
Вы также можете просто добавить атрибут defer - person Kris10an; 24.04.2019
comment
Если какие-либо браузеры показывают ошибку с пустым тегом script, включите комментарий javascript, как указано в <script type="text/javascript" src="/path/to/js/javascript.js">/* */</script>. - person Patanjali; 02.05.2020
comment
Мой JavaScript уже находится внизу раздела body. Этот ответ не сработал для меня. - person David Spector; 16.04.2021

arrow_upward
-1
arrow_downward

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

бывший. http://domain.com/100x100.jpg?201611

person SequenceDigitale.com    schedule 06.11.2016