title: How to load images async with RxJs and perform a method when all loaded
body: <p>I am trying to convert my promise based code to RxJs but have a hard time to get my head around Rx especially RxJs.</p>
  
  <p>I have a an array with paths.</p>
  
  <pre><code>var paths = ["imagePath1","imagePath2"];
  </code></pre>
  
  <p>And I like to load images in Javascript</p>
  
  <pre><code>var img = new Image();
  img.src = imagePath;
  image.onload // &lt;- when this callback fires I'll add them to the images array
  </code></pre>
  
  <p>and when all Images are loaded I like to execute a method on.</p>
  
  <p>I know there is </p>
  
  <pre><code>Rx.Observable.fromArray(imagepathes)
  </code></pre>
  
  <p>there is also something like</p>
  
  <pre><code>Rx.Observable.fromCallback(...)
  </code></pre>
  
  <p>and there is something like <code>flatMapLatest(...)</code>
  And <code>Rx.Observable.interval</code> or timebased scheduler</p>
  
  <p>Based on my research I would assume that these would be the ingredients to solve it but I cannot get the composition to work.</p>
  
  <p>So how do I load images from a array paths and when all images are loaded I execute a method based on an interval?</p>
  
  <p>Thanks for any help. </p>