Загружать фоновое изображение только после полной загрузки?

Ну, название в значительной степени описывает мой вопрос:

Как загрузить фоновое изображение динамически после его полной загрузки? Иногда я должен использовать фоны, которые настолько велики, что браузер может занять некоторое время, чтобы загрузить его. Я предпочел бы «загрузить его в фоновом режиме» и позволить ему исчезнуть, когда он будет полностью загружен.

Я думаю, что jQuery лучше всего использовать, но мне также нужен мой фон, если JavaScript отключен. Если это действительно невозможно, пусть будет так, но я думаю, что это так?

С наилучшими пожеланиями, Aart

……..

РЕДАКТИРОВАТЬ:

Спасибо, кучка, ребята! Я уже много лет пробовал это и просто не мог придумать хороший и простой способ.

Я преобразовал Javascript-решение Джеффри в jQuery, только потому, что встроенное угасание jQuery выглядит так потрясающе.

Я просто отправлю его здесь, если у кого-то еще будет такая же проблема:

  $(document).ready(function() { $('#img').css('opacity','0').load(function() { $(this).animate({ opacity: 1 }, 500); }); });   

Если изображение является элементом img :

Это должно нормально загружать изображение, если Javascript отключен, но показывать его только после его загрузки, если он включен.

Одно замечание (что я забыл); некоторые браузеры даже не попытаются загрузить изображение, если его свойство display равно none . Вот почему этот метод использует атрибут opacity .

Вы не можете сделать это, когда JS отключен. Однако вы можете установить фоновое изображение в CSS, а затем использовать следующий скрипт (при условии, что элемент имеет идентификатор myelem ).

 (function() { var elm = document.getElementById('myelem'), url = 'background image URL here'; elm.style.backgroundImage = "none"; var tmp = new Image(); tmp.onload = function() { elm.style.backgroundImage = "url('"+url+"')"; // or insert some other special effect code here. }; tmp.src = url; })(); 

EDIT: Хотя, убедитесь, что ваши фоновые изображения оптимальны. Если они PNG, попробуйте их проиндексировать с помощью как можно большего размера таблицы цветов или убедитесь, что альфа-канал удален, если нет прозрачности. Если они JPEG, попробуйте отрегулировать сжатие.

Посмотрите пример на этой странице: http://www.w3schools.com/jsref/event_img_onload.asp

Использование «image.onload» запустит ваш код только тогда, когда изображение будет готово

Без javascript у вас не может быть событий, поэтому вы не сможете узнать, загружено ли изображение, по крайней мере, для первого рендеринга.

Вы также можете использовать предварительную загрузку css (поместите изображение в качестве фона в скрытый div), но это будет работать лучше при первом обновлении, а не во время загрузки.

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

 var my_bg = new Image(); my_bg.src = "url(mybackground.png)"; document.style.backgroundImage = my_bg; 

То, что вы ищете, – это метод изображения onLoad. Если вы установите изображение с дисплеем: ни один из них не будет видимым. Чтобы обойти возможный недостаток javascript, вы делаете следующее:

     

Таким образом, если javascript не включен, bg будет загружаться как обычно. Если это так, оно будет отображаться в конце