Nested Events inside loop with RXJS beta 2.0

Question

Hello,

I try to use RXJS to run the following code:

        for (var i = 0, file; file = openFileDialog.files[i]; i++) {
            var li = document.createElement("li");
            li.innerHTML = file.name;
            list.appendChild(li);

            // Only process image files.
            if (!file.type.match('image.*')) {
                continue;
            }

            var reader = new FileReader();

            // Closure to capture the file information.
            reader.onload = (function (theFile) {
                return function (e) {
                    // Render thumbnail.
                    var span = document.createElement('span');
                    var imgElement = document.createElement('img');
                    imgElement.onload = function () {
                        span.innerHTML = ['<img class="thumb" src="', imgElement.src,
                            '" title="', escape(theFile.name), '"/>'].join('');
                        document.getElementById('fileList').insertBefore(span, null);
                    };
                    imgElement.src = e.target.result;

                };
            })(file);

            // Read in the image file as a data URL.
            reader.readAsDataURL(file);
        }

I select multiple images from openFileDialog, then display the list and finally display the images.

It works great except that images are not displayed as in the list depending on the bitmap size (small renders quickly) which is why I try to use RXJS to keep the order.

I can't find any examples that show multiple events merging inside loop with RXJS, even a working example with img.onload event.

Hope someone could help me.

Thanks in advance for your help.