title: How to determine in javascript when a dict of images created in django has loaded
body: <p>I am using django and javascript. When a page is first loaded I load a dict of images (around 85 in all) and I don't want the javascript to attempt to display the images until I am sure that all of the images are loaded</p>
  <p><strong>js</strong></p>
  <pre><code>$(document).ready(function () {
      $.ajax(
          {
              type: &quot;GET&quot;,
              url: &quot;/common/load-common-data/&quot;,
              cache: false,
              success: function (context) {
                  images = context.images;
                  setTimeout(() =&gt; {
                      displayImages(images)
                  }, 750);
              }
          }
      );
  }
  </code></pre>
  <p>This is unsatisfactory because the 750 ms delay is arbitrary and might not be sufficient in specific cases</p>
  <p>I have seen <a href="https://ourcodeworld.com/articles/read/571/how-to-verify-when-multiple-images-have-been-loaded-in-javascript" rel="nofollow noreferrer">attempts to solve this</a>, but they rely on loading the images individually whereas for various reasons I need to select the images in my <strong>view</strong> and upload them as a dict.</p>