откладывает загрузку определенного 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 «s, так что он загружает после всего остального, включая все изображений в HTML и любых других фонах CSS (some-menu и some-other-menu).

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

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

Answer 1

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

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

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

Answer 2

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

Answer 3

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

Вы можете использовать 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"); 

Answer 4

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

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

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

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

Answer 5

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

Answer 6

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

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

Answer 7

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

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