У страницы тяжелый background? Загрузим быстро!
Запись от 27.06.2014
Такое бывает, когда фон у страницы является большой картинкой. Такие бекграунды могут весить 200-600кб, а этот как правило очень много, если сравнивать с объемом остального контента на странице. Да и выглядит процесс загрузки такого изображения не всегда хорошо.
Итак, делаем несколько изображений для разной ширины экрана: 1920, 1600, 1366, хотя, набор может быть другим, на ваше усмотрение. И по возможности одну небольшую текстуру по тематике фоновой картинки.
Затем каждое из изображений сохраняем в приемлемом качестве и минимальном - для jpg разница в размере будет около 8-10 раз.
В CSS пишем:
Суть такая - сначала будет загружена текстура на фон, затем оформлено остальное содержимое документа. После - согласно разрешению монитора применится соответствующее правило с бекграундом в два слоя - нижний слой в плохом качестве (например 50 КБ), а затем по мере загрузки сверху появится изображение в высоком качестве (например, 500 КБ).
Таким образом посетитель сначала будет отвлечен на контент страницы и не заметит загрузки фонового изображения. В худшем случае покажется, что фон становится четче.
Итак, делаем несколько изображений для разной ширины экрана: 1920, 1600, 1366, хотя, набор может быть другим, на ваше усмотрение. И по возможности одну небольшую текстуру по тематике фоновой картинки.
Затем каждое из изображений сохраняем в приемлемом качестве и минимальном - для jpg разница в размере будет около 8-10 раз.
В CSS пишем:
/* Начало документа */
body {background: url(bg-body.jpg) #33363a;}
/* Конец документа */
@media screen and (max-width: 1366px) and (min-width: 1000px) {
body {
background: url(bg-body-1366.jpg) 50% 0 fixed,
url(bg-body-1366-lq.jpg) 50% 0 fixed #33363a;
}
}
@media screen and (max-width: 1600px) and (min-width: 1367px) {
body {
background: url(bg-body-1600.jpg) 50% 0 fixed,
url(bg-body-1600-lq.jpg) 50% 0 fixed #33363a;
}
}
@media screen and (min-width: 1601px) {
body {
background: url(bg-body-1920.jpg) 50% 0 fixed,
url(bg-body-1920-lq.jpg) 50% 0 fixed #33363a;
}
}Суть такая - сначала будет загружена текстура на фон, затем оформлено остальное содержимое документа. После - согласно разрешению монитора применится соответствующее правило с бекграундом в два слоя - нижний слой в плохом качестве (например 50 КБ), а затем по мере загрузки сверху появится изображение в высоком качестве (например, 500 КБ).
Таким образом посетитель сначала будет отвлечен на контент страницы и не заметит загрузки фонового изображения. В худшем случае покажется, что фон становится четче.