如何使用RxJs加载图像异步并在所有加载时执行方法

Question

我正在尝试将我的基于承诺的代码转换为RxJs,但很难让我的头围绕Rx尤其是RxJs.

我有一个带路径的数组.

var paths = ["imagePath1","imagePath2"];

我喜欢在Javascript中加载图像

var img = new Image();
img.src = imagePath;
image.onload // <- when this callback fires I'll add them to the images array

当加载所有图像时,我喜欢执行一个方法.

我知道有

Rx.Observable.fromArray(imagepathes)

还有类似的东西

Rx.Observable.fromCallback(...)

并且有类似flatMapLatest(...) And Rx.Observable.interval或基于时间的调度程序

根据我的研究,我会假设这些将是解决它的成分,但我不能让组合工作.

那么如何从数组路径加载图像,当加载所有图像时,我会根据间隔执行一个方法？

谢谢你的帮助.

Answer 1

首先,您需要一个为单独的图像创建Observable或Promise的函数:

function loadImage(imagePath){
   return Rx.Observable.create(function(observer){
     var img = new Image();
     img.src = imagePath;
     img.onload = function(){
       observer.onNext(img);
       observer.onCompleted();
     }
     img.onError = function(err){
       observer.onError(err);
     }
   });
}

比你可以使用它来加载所有图像

Rx.Observable
  .fromArray(imagepathes)
  .concatMap(loadImage) // or flatMap to get images in load order
  .toArray()
  .subscribe(function(images){
    // do something with loaded images
  })

Answer 2

我认为你不能用可观察量轻松做到这一点，因为没有任何东西可以表明完成（除非你有初始大小）。查看 Rx 版本的其他答案。

但是，您可以使用 Promise 数组：

/**
 * Loads an image and returns a promise
 * @param {string} url - URL of image to load
 * @return {Promise<Image>} - Promise for an image once finished loading.
 */
function loadImageAsync(url) {
    return new Promise(function(resolve, reject) {
        var img = new Image();
        img.src = imagePath;
        image.onload = function() { resolve(img); };
        image.onerror = reject;
    });
}

这样，您就可以轻松地执行以下操作：

var imageUrls = ['url1', 'url2', 'url3'];
Promise.all(imageUrls.map(loadImageAsync))
    .then(function(arrayOfImageElements) {
        // All done!
    });