Come posso verificare se un'immagine di sfondo è caricata?

Voglio impostare un'immagine di sfondo sul tag body, quindi eseguire un po 'di codice - in questo modo:

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

Come posso assicurarmi che l'immagine di sfondo sia completamente caricata?

prova questo:

$('<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)');
});

questo creerà una nuova immagine in memoria e utilizzerà l'evento load per rilevare quando viene caricato l'src.

Ho un plug-in jQuery chiamato in waitForImagesgrado di rilevare quando le immagini di sfondo sono state scaricate.

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

Qualcosa come questo:

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();
      });
  }
});

Non ci sono callback JS per gli asset CSS.

soluzione JS pura che aggiungerà il precaricatore, imposta l'immagine di sfondo e quindi la configura per la garbage collection insieme al suo listener di eventi :

Versione breve:

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;
});

Un po 'più a lungo con una piacevole transizione all'opacità:

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>

Ecco un piccolo plugin che ho creato per permetterti di fare esattamente questo, funziona anche su più immagini di sfondo e più elementi:

Leggi l'articolo:

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

o vai direttamente al codice del plugin:

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

Quindi basta includere il plug-in e quindi chiamarlo sull'elemento:

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

Ovviamente scarica il plugin e memorizzalo sul tuo hosting.

Per impostazione predefinita, aggiunge una classe "caricata da bg" aggiuntiva a ciascun elemento corrispondente una volta caricato lo sfondo, ma puoi facilmente cambiarlo passando una funzione diversa come questa:

<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>

Ecco un codice che lo dimostra funzionare.

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

Ho trovato una soluzione che ha funzionato meglio per me e che ha il vantaggio di essere utilizzabile con diverse immagini (caso non illustrato in questo esempio).

Dalla risposta di @adeneo su questa domanda :

Se hai un elemento con un'immagine di sfondo, in questo modo

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

Puoi attendere il caricamento dello sfondo ottenendo l'URL dell'immagine e utilizzandolo per un oggetto immagine in javascript con un gestore onload

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();

Ho fatto un puro hack javascript per renderlo possibile.

<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>

O

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
});