задержка загрузки определенного фонового изображения css

Question

в CSS, подобном этому :

...
#big-menu {
    background: #fff url(../images/big-menu.jpg) no-repeat;
}
#some-menu {
    background: #fff url(../images/some-menu.jpg) no-repeat;
}
#some-other-menu {
    background: #fff url(../images/some-other-menu.jpg) no-repeat;
}
...

есть ли способ отложить загрузку #big-menuфоновое изображение, чтобы оно загружалось после всего остального, включая все изображения в HTML и любой другой фон CSS ( some-menu и some-other-menu).

Причина в том, big-menu.jpg очень большой по размеру, и я хочу, чтобы он загружался последним.В конце концов, это просто украшение для глаз, и есть другие фоновые изображения, которые можно использовать лучше, чем это.(например, те, что используются в кнопках)

Соответствует ли порядок размещения его в CSS или вхождениям разметки (#big-menu) в HTML есть что - нибудь общее с тем , что загружается первым ?или есть более надежный способ контролировать это ?javascript (предпочтительнее jQuery) - это нормально.

Answer 1

Порядок в css не определяет, какие ресурсы загружаются первыми, но влияет на то, какой существующий стиль перезаписывается или наследуется.

Попробуйте событие onload JavaScript onload.Событие выполняется только после завершения загрузки страницы.

function loadBG(){
    document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)";
}
window.onload=loadBG();

Answer 2

Возможно, это не идеальное решение (поскольку это css-background, а не изображение), но Загрузчик изображений YUI обеспечивает хороший способ отложенной загрузки изображений.

Создайте группу

var imgGroup = new YAHOO.util.ImageLoader.group(window, 'load', 2);

После загрузки документа изображение загрузится через 2 секунды после него.Видишь Yahoo!Сияй или тот примеры для демонстрации.

Answer 3

Другим решением является разделение ваших ресурсов по разным доменам, браузеры будут запрашивать только два ресурса одновременно, а затем ждать загрузки одного, прежде чем запускать следующий.Вы можете наблюдать это с помощью Поджигатель и ИЗлоу, поэтому размещаем некоторые активы на images.example.com и images1.example.com и смотрим, окажет ли это влияние

Answer 4

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

Однако вы могли бы использовать jQuery для загрузки изображений в правильной последовательности

$('firstElement').addClass('some-menu');
$('secondElement').addClass('some-other-menu');
$('lastElement').addClass('big-menu');

Редактировать: Хорошо, тогда, возможно, вместо добавления класса лучшим решением было бы добавить фоновые изображения во время выполнения.

$('firstElement').css("background-image", "some-menu.jpg");
$('secondElement').css("background-image", "some-other-menu.jpg");
$('lastElement').css("background-image", "big-menu.jpg");

Answer 5

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

Answer 6

Порядок загрузки нельзя контролировать с помощью css.Однако вы можете использовать javascript для достижения этой цели.

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

Answer 7

Трюк Джейсона с Javascript сработал для меня в решении этой проблемы.Однако мне пришлось немного подкорректировать синтаксис:

function loadBG(){
     document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)";
}
window.onload=loadBG();