title: Preloading/prefetching large sets of remote images via JavaScript
body: <p>I am using the JavaScript (shown below) to preload/prefetch images. The use case is that I have client-side searchable lists of up to 30,000 records, and when a user uses the search I want the avatar/image associated with the search result to render immediately.</p>
  <p>I'm running into apparent browser performance issues (browser and other JS code starts to become less responsive) when using the code below with large arrays of images (ie. 5,000 images).</p>
  <p>Does anyone have suggestions for how to optimize this code to perform better? Or, is there a way to do this in the background using a Service Worker?</p>
  <pre class="lang-js prettyprint-override"><code>function prefetchImages(arr) {
    var cache = document.createElement(&quot;CACHE&quot;);
    cache.style = &quot;position:absolute;z-index:-1000;opacity:0;&quot;;
    document.body.appendChild(cache);
  
    for (var i=0; i&lt;arr.length; i++) {
      var img = new Image();
      img.src = arr[i];
      img.style = &quot;position:absolute&quot;;
      cache.appendChild(img);
    }
  }
  
  prefetchImages(['https://avatars.githubusercontent.com/u/9919?s=200&amp;v=4']
  </code></pre>