Strange behavior of Rx.Observable.prototype.fromEvent()

Question

Today I've seen a strange problem when using RxJS. Please help me inspect it.

The problem I am working on is: "Given an array of image URLs, load and append all images to a div."

All the code snippets to demonstrate is here:

https://pastebin.com/F3ZkH3F8

At the beginning, I used the first snippet.

However, Rx.Observable.prototype.flatMap sometimes puts the images in wrong order (this behavior is noticed in the documentation). So, I changed to use concatMap (second snippet).

This time, only the first image is loaded. I took some time inspect the problem. I doubt that event load is not trigged from image. But the most confusing situation is that when I add some code to listen to image's load event only, it showed me that the event is trigged properly... (third snippet).

Then I decided to write another version using $.Deferred (fourth snippet).

It worked...

Could you please tell me what is the problem? Thank you very much!

Answer 1

Because fromEvent(image, 'load') on the first sub-observable is not completed, other sub-observables are waiting forever. So you should complete sub-observable after first event.

Use take(1).

excerpt from your second snippet

...
var loadedImageStream = Rx.Observable
                            .fromEvent(image, 'load')
                            .map(function() {                                  
                                return image;
                             })
...

Add take(1) to complete sub-observable

...
var loadedImageStream = Rx.Observable
                            .fromEvent(image, 'load')
                            .map(function() {                                  
                                return image;
                             })
                            .take(1)
...

EDIT:

Using concatMap makes loading image sequential, so it is slow.

If you pass index, you can use replace instead of append to keep the order. In this case, you can use flatMap, which enables fast concurrent loading.

$(function () {
    var imageURLList = [
        'https://placehold.it/500x100',
        'https://placehold.it/500x200',
        'https://placehold.it/500x300',
        'https://placehold.it/500x400',
        'https://placehold.it/500x500'
    ];
    var imagesDOM = $('#images');

    Rx.Observable
        .fromArray(imageURLList)
        .do(function (imageURL) {
            imagesDOM.append(new Image()); // placeholder
        })
        .flatMap(function (imageURL, index) {
            var image = new Image();

            var loadedImageStream = Rx.Observable
                .fromEvent(image, 'load')
                .map(function () {
                    return [image, index];
                })
                .take(1)

            image.src = imageURL;

            return loadedImageStream;
        })
        .subscribe(function (image_index) {
            var image = image_index[0];
            var index = image_index[1];

            imagesDOM.children().get(index).replaceWith(image);
        })
})