Показать фоновое изображение <body>, когда само изображение будет готово

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

Вместо этого я хочу показать этот фон (с эффектом затухания), когда браузер заканчивает загрузку изображения.

Дело в том, что background-image должен быть установлен внутри body тег, поэтому я не хочу применять JQuery с помощью $('body').hide; или же $('body').show; потому что он скрывает практически всю веб-страницу.

Я искал эту функцию, но я нашел только случаи, когда люди хотели показать / скрыть их в другом теге (вместо полностью упакованного (body в моем случае)).

Это возможно, или я просто достигаю самого Марса? Спасибо за вашу помощь!

Источник

4 ответа

Если вы используете $('body').hide Вы скрываете весь элемент, а не только фоновое изображение, то есть ничего не будет показано. Просто установите фоновое изображение, используя модификацию CSS

$('body').css("background-image", "url(picture.jpg)");
Источник

Я предлагаю вам сделать следующее:

  1. Загрузите изображение отдельно от документа.
  2. Затем загрузите изображение в JavaScript

  3. Установка его в фоновом режиме только после завершения загрузки (он будет кэширован, так что вы можете просто указать src изображения, и он будет работать)

    var img = new Image();
img.onload = function() { .$('body').css('background-image', 'url(' + http://path/to/image.jpg +  ')'); }
img.src = "http://path/to/image.jpg";

  4. Необязательно: запускайте все только после завершения загрузки документа (оберните тело функции:

    function () { $(ready) { function() { .$('body').css('background-image',                  'url(' +     http://path/to/image.jpg +  ')'); }  }
Источник

Вы должны создать 2 CSS-класса. bodyloading а также bodyloaded, Первый - имя класса по умолчанию для тега body. После загрузки страницы вы можете изменить имя класса тегов тела на bodyloaded

document.body.className = "bodyloaded";

Таким образом, будет отображен второй CSS (который будет содержать фоновое изображение).

Источник

Просто установите свойство background-image тела после загрузки страницы следующим образом:

jQuery('body').css('background-image', 'url(path/to/some/image.jpg)');

Смотрите это здесь: http://jsfiddle.net/duffmaster33/Z9pEg/

Источник
Другие вопросы по тегам