Загрузка background на сайте

380
16 января 2017, 19:06

В стилях jsp-страницы, в body для background ставлю картинку

body {
    background: url(/img/min.jpg);
}

Как сделать, чтобы при переходе на страницу background загружался первым? А то с начала загружаются все элементы страницы на белом фоне, даже картинки из бд подтягиваются раньше и только потом(последним) background.

Answer 1

Предположу, что может сработать что-то такое (но я бы за это руки поотрывал, наверное):

<script>
~function() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', "img.jpg", false);
  xhr.send()
}();
</script>
</head>
<body style="background:url(img.jpg)">

Другой вариант (тоже не очень):

<body style="background:url(img.jpg)">
<script>
~function() {
  document.body.style.display = 'none'; // Не в css - вдруг скрипты отключены
  var xhr = new XMLHttpRequest();
  xhr.open('GET', "img.jpg", true);
  xhr.onload = function () { document.body.style.display = 'block' };
  xhr.send();
}();
</script>

В обоих случаях надо не забыть правильно настроить кэширование.

Обращаю внимание, что во втором случае скрипт должен быть в начале body.
А вот в первом на эту тему надо подумать.

Answer 2

Во-первых, советую вам оптимизировать изображения, если вы вдруг этого не делаете. Для этого есть множество онлайн-сервисов (TinyPNG, например), софта или плагинов для сборщиков проектов. Если время загрузки фонового изображения настолько велико, то, вероятнее всего, изображение занимает очень много места.

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

В-третьих, я крайне не рекомендую отдавать наивысший приоритет загрузке фонового изображения. Если вы сделаете всё, чтобы картинка загружалась первой, в ущерб всему остальному контенту, то это негативно отразится на UX. Если без фонового изображения страница является неполноценной, то это задача дизайнеру. Просто поставьте цвет фона, аналогичный среднему цвету картинки, необходимому блоку, чтобы можно было прочесть текст — этого достаточно в 99% случаев.

READ ALSO
как сделать подсказки для input
HTML

как сделать подсказки для input

Вот скрин из консоли Chrome:

 271
оформление поля &ldquo;input&rdquo; [требует правки]
HTML

оформление поля “input” [требует правки]

Доброго времени суток, подскажите пожалуйста: ест два input, один для логина, второй соответственно пароля, они сдвинуты вместе, как сделать...

 242
SQL Запрос с UUID()
HTML

SQL Запрос с UUID()

Доброго времени суток! Возникла проблема с кода не INSERT-ся функция: function bookingInsert($hotelid, $roomid, $dtarrive, $dtdepart, $userid, $price, $status){ $cn = dbConnect(); mysql_query("INSERT...

 264
Как правильно парсить HTML
HTML

Как правильно парсить HTML

Вступление: Хочу разобраться с работой браузера, поэтому пишу свойНаписал кое-как работающую версию, в которой парсер просто вытаскивает...

 294