Wie kann ich überprüfen, ob ein Hintergrundbild geladen ist?

Ich möchte ein Hintergrundbild für das Body-Tag festlegen und dann einen Code ausführen - wie folgt:

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

Wie kann ich sicherstellen, dass das Hintergrundbild vollständig geladen ist?

Versuche dies:

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

Dadurch wird ein neues Image im Speicher erstellt und mithilfe des Ladeereignisses erkannt, wann der Quellcode geladen wird.

Ich habe ein jQuery-Plugin namens waitForImages, das erkennen kann, wann Hintergrundbilder heruntergeladen wurden.

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

Etwas wie das:

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

Es gibt keine JS-Rückrufe für CSS-Assets.

reine JS-Lösung, die Preloader hinzufügt, das Hintergrundbild festlegt und es dann zusammen mit dem Ereignis-Listener für die Garbage Collection einrichtet :

Kurzfassung:

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

Ein bisschen länger mit schönem Deckkraftübergang:

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>

Hier ist ein kleines Plugin, das ich erstellt habe, damit Sie genau dies tun können. Es funktioniert auch mit mehreren Hintergrundbildern und mehreren Elementen:

Lesen Sie den Artikel:

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

oder gehen Sie direkt zum Plugin-Code:

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

Fügen Sie einfach das Plugin hinzu und rufen Sie es dann für das Element auf:

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

Laden Sie das Plugin herunter und speichern Sie es auf Ihrem eigenen Hosting.

Standardmäßig wird jedem übereinstimmenden Element eine zusätzliche "bg-geladene" Klasse hinzugefügt, sobald der Hintergrund geladen ist. Sie können dies jedoch leicht ändern, indem Sie ihm eine andere Funktion wie die folgende übergeben:

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

Hier ist ein Codepen, der die Funktionsweise demonstriert.

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

Ich habe eine Lösung gefunden, die für mich besser funktioniert und die den Vorteil hat, dass sie mit mehreren Bildern verwendet werden kann (Fall in diesem Beispiel nicht dargestellt).

Aus der Antwort von @ adeneo auf diese Frage :

Wenn Sie ein Element mit einem Hintergrundbild haben, wie dieses

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

Sie können warten, bis der Hintergrund geladen ist, indem Sie die Bild-URL abrufen und sie mit einem Onload-Handler für ein Bildobjekt in Javascript verwenden

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

Ich habe einen reinen Javascript-Hack durchgeführt, um dies zu ermöglichen.

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

Oder

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