title: Load all images on page and wait till done
body: <p>I'm trying to get all the images on the page to load (from the chrome extension side) and then execute some code on those images, problem is sometimes sites load images lazily (e.g. when the user scrolls down to them).</p>
  
  <p>Is there any way to make sure all of them are loaded? I tried scrolling down to the bottom of the window but that won't work with pagination.</p>
  
  <pre><code>export function imagesHaveLoaded() {
    return Array.from(document.querySelectorAll("img")).every(img =&gt; img.complete &amp;&amp; img.naturalWidth);
  }
  
  return Promise.resolve()
        .then(() =&gt; (document.scrollingElement.scrollTop = bottom))
        .then(
          new Promise((resolve, reject) =&gt; {
            let wait = setTimeout(() =&gt; {
              clearTimeout(wait);
              resolve();
            }, 400);
          })
        )
        .then(() =&gt; {
          console.log(document.scrollingElement.scrollTop);
          document.scrollingElement.scrollTop = currentScroll;
        })
        .then(
          new Promise((resolve, reject) =&gt; {
            let wait = setTimeout(() =&gt; {
              clearTimeout(wait);
              resolve();
            }, 400);
          })
        )
        .then(until(imagesHaveLoaded, 2000))
        .then(Promise.all(promises));
  </code></pre>
  
  <p>It loads the lazy loading images but if there are more of them that are lazy loaded it won't work (I need the image itself to be loaded not the url so I can read it's data)</p>