Як я можу перевірити, чи завантажено фонове зображення?

Я хочу встановити фонове зображення на тезі тіла, а потім запустити якийсь код - наприклад:

$('body').css('background-image','http://picture.de/image.png').load(function() {
    alert('Background image done loading');
    // This doesn't work
});

Як я можу переконатися, що фонове зображення завантажено повністю?

спробуйте це:

$('<img/>').attr('src', 'http://picture.de/image.png').on('load', function() {
   $(this).remove(); // prevent memory leaks as @benweet suggested
   $('body').css('background-image', 'url(http://picture.de/image.png)');
});

це створить нове зображення в пам'яті та використовуватиме подія завантаження для виявлення, коли src завантажений.

У мене є плагін jQuery, який називається waitForImages, коли фонові зображення завантажуються.

$('body')
  .css('background-image','url(http://picture.de/image.png)')
  .waitForImages(function() {
    alert('Background image done loading');
    // This *does* work
  }, $.noop, true);

Щось на зразок цього:

var $div = $('div'),
  bg = $div.css('background-image');
  if (bg) {
    var src = bg.replace(/(^url\()|(\)$|[\"\'])/g, ''),
      $img = $('<img>').attr('src', src).on('load', function() {
        // do something, maybe:
        $div.fadeIn();
      });
  }
});

Немає зворотних викликів JS для активів CSS.

чисте рішення JS, яке додасть попередній завантажувач, встановить фонове зображення, а потім налаштує його для збору сміття разом із його слухачем подій :

Коротка версія:

const imageUrl = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
let bgElement = document.querySelector("body");
let preloaderImg = document.createElement("img");
preloaderImg.src = imageUrl;

preloaderImg.addEventListener('load', (event) => {
    bgElement.style.backgroundImage = `url(${imageUrl})`;
    preloaderImg = null;
});

Трохи довше з приємним переходом непрозорості:

const imageUrl = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
let bgElement = document.querySelector(".bg-lazy");
bgElement.classList.add("bg-loading");
let preloaderImg = document.createElement("img");
preloaderImg.src = imageUrl;

preloaderImg.addEventListener('load', (event) => {
  bgElement.classList.remove("bg-loading");
  bgElement.style.backgroundImage = `url(${imageUrl})`;
  preloaderImg = null;
});

.bg-lazy {
  height: 100vh;
  width: 100vw;
  transition: opacity 1s ease-out;
}

.bg-loading {
  opacity: 0;
}

<div class="bg-lazy"></div>

Ось невеликий плагін, який я створив, щоб дозволити вам зробити саме це, він також працює на декількох фонових зображеннях та на декількох елементах:

Прочитати статтю:

http://catmull.uk/code-lab/background-image-loaded/

або перейдіть прямо до коду плагіна:

http://catmull.uk/downloads/bg-loaded/bg-loaded.js

Отож просто включіть плагін і викличте його на елементі:

<script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script>
<script type="text/javascript">
   $('body').bgLoaded();
</script>

Очевидно завантажте плагін і зберігайте його на власному хостингу.

За замовчуванням він додає додатковий клас "завантажений bg" до кожного відповідного елемента після завантаження фону, але ви можете легко змінити це, передавши йому іншу функцію, як це:

<script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script>
<script type="text/javascript">
   $('body').bgLoaded({
      afterLoaded : function() {
         alert('Background image done loading');
      }
   });
</script>

Ось кодекс, що демонструє його роботу.

http://codepen.io/catmull/pen/Lfcpb

Я знайшов рішення, яке працювало краще для мене, і яке має перевагу у використанні декількох зображень (випадок не проілюстрований у цьому прикладі).

З відповіді @ adeneo на це запитання :

Якщо у вас є елемент із фоновим зображенням, як це

<div id="test" style="background-image: url(link/to/image.png)"><div>

Ви можете зачекати, коли фон завантажиться, отримавши URL-адресу зображення та використовуючи його для об’єкта зображення у javascript з обробником завантаження

var src = $('#test').css('background-image');
var url = src.match(/\((.*?)\)/)[1].replace(/('|")/g,'');

var img = new Image();
img.onload = function() {
    alert('image loaded');
}
img.src = url;
if (img.complete) img.onload();

Я зробив чистий злом JavaScript, щоб зробити це можливим.

<div class="my_background_image" style="background-image: url(broken-image.jpg)">
<img class="image_error" src="broken-image.jpg" onerror="this.parentElement.style.display='none';">
</div>

Або

onerror="this.parentElement.backgroundImage = "url('image_placeHolder.png')";

css:

.image_error {
    display: none;
}

https://github.com/alexanderdickson/waitForImages

$('selector').waitForImages({
    finished: function() {
       // ...
    },
    each: function() {
       // ...
    },
    waitForAll: true
});