title: js wait image nodelist to load
body: <p>Hi there I am new to promise, I need to access a valid <code>img.naturalWidth</code> after the image is load. I have a container structure:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;image-grid&quot;&gt;
      &lt;img src=&quot;https://picsum.photos/200/300&quot; alt=&quot;&quot;&gt;
      &lt;img src=&quot;https://picsum.photos/400/500&quot; alt=&quot;&quot;&gt;
      &lt;img src=&quot;https://picsum.photos/400/400&quot; alt=&quot;&quot;&gt;
      &lt;img src=&quot;https://picsum.photos/200/400&quot; alt=&quot;&quot;&gt;
      &lt;img src=&quot;https://picsum.photos/100/300&quot; alt=&quot;&quot;&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>
  function init(
      container, 
      border, 
  ){
      let imgs = container.querySelectorAll('img');
      let wc = 0;
      let hc = 0;
  
      function waitForImage(imgElem) {
          return new Promise(res =&gt; {
              if (imgElem.complete) {
                  return res();
              }
              imgElem.onload = () =&gt; res();
              imgElem.onerror = () =&gt; res();
          });
      }
  
      container.querySelectorAll('img').forEach(async img=&gt;{
          await waitForImage(img);
          if(img.naturalWidth &gt; img.naturalHeight){
              wc++;
          }else if(img.naturalWidth &lt; img.naturalHeight){
              hc++;
          }
      });
      return new Shelf(
          container, 
          wc &gt; hc ? 1 : 0, 
          border, 
      )
  }
  </code></pre>
  <p>I need to init <code>Shelf</code> class after all images in container is properly loaded. however, after adding the promise the width and height I got is still 0.</p>
  <p>I will be more than grateful for your help.</p>