задержка загрузки определенного фонового изображения CSS - PullRequest
Новая
       11

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

5 голосов
/ 03 февраля 2009

в 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) в порядке.

Ответы [ 7 ]

8 голосов
/ 03 февраля 2009

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

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

function loadBG(){
    document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)";
}
window.onload=loadBG();
4 голосов
/ 05 февраля 2009

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

4 голосов
/ 03 февраля 2009

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

Создать группу 

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

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

2 голосов
/ 03 февраля 2009

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

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

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

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

$('firstElement').css("background-image", "some-menu.jpg");
$('secondElement').css("background-image", "some-other-menu.jpg");
$('lastElement').css("background-image", "big-menu.jpg");
0 голосов
/ 09 января 2012

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

function loadBG(){
     document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)";
}
window.onload=loadBG();
0 голосов
/ 02 июня 2009

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

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

0 голосов
/ 03 февраля 2009

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

...