Wie kann ich mehrere ImageElement Last Ereignisse in Dart

Question

ich einen Lader Dart Hintergrundbild JavaScript umgewandelt Kette, ein bisschen wie folgt aus: Javascript image loader

Und ich benutze ein Timer zu überprüfen, ob die Bilder alle geladen sind. Das funktioniert OK.

Aber in Dart gibt es verkettbar Futures und ich frage mich, wenn Sie könnten Kette der Hintergrund Laden von Imageelements ...

ImageElement a = new ImageElement(); 
ImageElement b = new ImageElement(); 
ImageElement c = new ImageElement(); 

Future.wait([a.src='a.jpg', b.src='b.jpg', c.src='ca.jpg']) 
    .then((List responses) => chooseBestResponse(responses)) 
    .catchError((e) => handleError(e)); 

Natürlich Zuordnung src und das eigentliche Bild Laden ist asynchron so das won‘ t Arbeit ...

Ich brauche auch etwas Code für jedes Bild auszuführen, sobald es geladen ist.

Vielleicht brauche ich meine eigene FutureImageElement Klasse zu schreiben, aber ich dachte, dass ich zuerst fragen würde ...

Irgendwelche Ideen?

Answer 1

Sicher, können Sie Futures verwenden. Verwenden Sie einfach die first Eigenschaft von Streams:

var a = new ImageElement(src: 'a.png'); 
var b = new ImageElement(src: 'b.png'); 
var c = new ImageElement(src: 'c.png'); 

var futures = [a.onLoad.first, b.onLoad.first, c.onLoad.first]; 

Future.wait(futures).then((_) => print('done')); 

Der Text „done“ gedruckt werden, wenn alle drei Bilder geladen werden.

Answer 2

Müssen Sie wirklich mit Futures dafür arbeiten?

Warum nicht so etwas wie:

List<String> files = ["a", "b", "c"]; 
int imagesToLoad = files.length; 
for (String fileName in files) { 
    ImageElement pic = new ImageElement() 
     ..src = "$fileName.jpg" 
     ..onLoad.listen((Event e) { 
      // do something when the file has finished loading 

      imagesToLoad--; 
      if (imagesToLoad == 0) { 
      // do something when all images have loaded 
      } 
     }) 
    ; 
}