title: Delay between appendChild and actually becoming visible in Firefox
body: <p>I tried adding a preloading function to my JS application. Basically it should only continue when all images are ready to display. Waiting for image.onload is the first step, but Firefox also needs some time appending the image to the document. In the following example the red background should not be visible because in theory the image is already there.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.body.style.margin = "0";
  document.body.style.background = "#000";
  var img = document.createElement("img");
  img.style.width = "100%";
  
  img.onload = function()
  {
    // Add the image
    document.body.appendChild(img);
    // Then set BG to red - which should not be visible
    document.body.style.background = "#F00";
  }
  
  img.src = "https://upload.wikimedia.org/wikipedia/commons/9/9d/Wikidata_Map_July_2017_Huge.png";</code></pre>
  </div>
  </div>
  </p>
  <p>However in this example the red background is visible (up to 2 seconds on my system). I guess Firefox requires certain CPU power to append and shrink the image to 100% width. The problem didn't appear in Chrome or Safari.</p>
  <p>How can I detect if the image is actually visible or still being processed?</p>