title: Printing Div with Images
body: <p>I am working on an MVC C# app wherein the contents of a div are composed with an AJAX call that retrieves database fields and returned as the success message to JavaScript. The string (a trivial example):</p>
  
  <pre><code>"&lt;div style='background:yellow'&gt;asdf&lt;img src='myfile.jpg'&gt;&lt;/div&gt;"
  </code></pre>
  
  <p>is then printed with:</p>
  
  <pre><code>function printDivContents(contents) {
      var printContents = contents;
      var originalContents = document.body.innerHTML;
      document.body.innerHTML = "&lt;div style='margin:10px'&gt;" + printContents + "&lt;/div&gt;";
      window.print();
      document.body.innerHTML = originalContents;
  }
  </code></pre>
  
  <p>Everything prints perfectly in most cases, but there is an image in there that prints if and only if it has been loaded previously. I would like it to always print. I have tried adding a preloading script to the content string. I can only use pure JavaScript, not jQuery, and all CSS has to be inline. What are my options to get the image to load? Should I pause execution to wait for the DOM to load, assign the image as a hidden div background on the calling page, or...?</p>