Javascript - Bilder warten, bis sie geladen sind

Question

var l = false;
var l2 = false;

var imm = new Image();
imm.src = "b.png";

imm.onload = function(){
l = true;
}

var imm2 = new Image();
imm2.src = "c.png";

imm2.onload = function(){
l2 = true;
}

Wie kann ich diesem JavaScript sagen, eine Funktion nur zu starten, wenn l und l2 true sind? Soll ich eine Schleife einrichten, die ständig diese beiden Variablen überprüft? Gibt es einen effizienteren Weg? Ich möchte nicht, dass mein Skript ohne Bilder startet, sondern mit .onload kann ich auf nur ein Bild warten, das geladen wird, und nicht auf alle. Vielen Dank für Ihre Hilfe!

Answer 1

Meiner Meinung nach elegantere Methode:

var loadedImagesCount = 0;
var imageNames = ["b.png", "c.png"];
var imagesArray = [];
for (var i = 0; i < imageNames.length; i++) {
    var image = new Image();
    image.src = imageNames[i];
    image.onload = function(){
        loadedImagesCount++;
        if (loadedImagesCount >= imageNames.length) {
            //alle Bilder geladen
        }
    }
    imagesArray.push(image);
}

Statt mit vielen verschiedenen Bildvariablen herumzuspielen, speichern Sie einfach die Bildnamen in einem einfachen Array und durchlaufen Sie dieses dann, um zu zählen, wie viele Bilder geladen sind.

Answer 2

Keine Notwendigkeit für Schleifen. Sie könnten sie einfach eine Funktion aufrufen lassen, die überprüft, ob l und l2 wahr sind und das tun, was Sie tun möchten:

var onLoaded = function() {
    if (l && l2) {
        // führe deine Aktionen aus
    }
}

imm.onload = function(){
    l = true;
    onLoaded(); // Aufruf von onLoaded
}

imm2.onload = function(){
    l2 = true;
    onLoaded(); // Aufruf von onLoaded
}

Es handelt sich im Grunde um eine einfachere Form des Observer-Patterns. Es gibt jQuery-Plugins wie Radio.js, die das für Sie kapseln.

Answer 3

Hier ist ein generisches Beispiel (funktioniert mit beliebigen Bildanzahlen)

function preload( images, callback){
   var imageElements = [],
       counter = images.length,
       lfunc = function(){if (--counter === 0 && callback) callback(imageElements);};

   // erstelle die Bilder und wende die onload-Methode an
   for (var i = 0, len = images.length; i < len; i++){
      var img = new Image();
      imageElements.push( img );
      img.onload = lfunc;
      img.src = images[i];
   }
}

function codeOncePreloadCompletes(preloadedImages){
  // Mache hier was du möchtest
  // Bilder sind vorgeladen
  // Du hast Zugriff auf die vorgeladenen Bilder, falls nötig
  // mit dem Argument preloadedImages
}

// VERWENDUNG

preload( ['b.png', 'c.png'], codeOncePreloadCompletes);

// ODER

preload( ['b.png', 'c.png'], function(preloadImages){
   // schreibe direkt hier, was nach dem Vorgeladenen zu tun ist
});

Answer 4

Wenn Sie Bilder in der Reihenfolge aus einer gegebenen Liste von URLs laden möchten, dann finde ich dies nützlich:

preloadImages_helper("ersteURL", "zweiteURL");

    function preloadImages_helper(){
        var args =  Array.prototype.slice.call(arguments);
        if(!(args === undefined) && args.length > 0){
            var img = new Image();
            img.src = arguments[0];
            img.onload = function(){
                preloadedImages.push(img);
                console.log("Bild wird geladen");
                //Vergessen Sie nicht, den Benutzercode aufzurufen!
                if(!(args === undefined) && args.length > 1){
                    args.shift();
                    preloadImages_helper.apply(this, args);
                }
                else{
                    console.log("Fertig mit dem Laden von Bildern");
                    userCode();
                }
            };
        }
    }

Answer 5

Wenn dies die einzigen 2 Zeiten in Ihrem gesamten Skript sind, dass l und l2 festgelegt sind, können Sie nach Festlegung der Werte überprüfen.

var l = false;
var l2 = false;

var imm = new Image();
imm.src = "b.png";

imm.onload = function(){
  l = true;
  if (l && l2) {
    myFunc();
  }
}

var imm2 = new Image();
imm2.src = "c.png";

imm2.onload = function(){
  l2 = true;
  if (l && l2) {
    myFunc();
  }
}

function myFunc(){
  //Mach was
}