Làm thế nào tôi có thể chuỗi nhiều sự kiện tải ImageElement trong Dart

Question

tôi chuyển đổi một Javascript hình nền loader để Dart, kinda như thế này: Javascript image loader

Và tôi sử dụng một Timer để kiểm tra xem những hình ảnh đều được nạp. Tính năng này hoạt động tốt.

Nhưng trong Dart có thể kết nối tương lai và tôi đã tự hỏi nếu bạn có thể chuỗi tải nền của 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)); 

Tất nhiên gán src và hình ảnh tải thực tế là không đồng bộ nên won này' t work ...

Tôi cũng cần một số mã để thực thi cho mỗi hình ảnh khi nó được tải.

Có lẽ tôi cần viết lớp FutureImageElement của riêng mình, nhưng tôi nghĩ tôi muốn hỏi trước ...

Bất kỳ ý tưởng nào?

Answer 1

Chắc chắn, bạn có thể sử dụng tương lai. Chỉ cần sử dụng thuộc tính first luồng:

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

Văn bản "hoàn thành" sẽ được in khi cả ba hình ảnh được tải.

Answer 2

Bạn có thực sự cần phải làm việc với Futures cho điều này không?

Tại sao không phải cái gì như:

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