用图像打印Div

Question

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):

"<div style='background:yellow'>asdf<img src='myfile.jpg'></div>"

is then printed with:

function printDivContents(contents) {
    var printContents = contents;
    var originalContents = document.body.innerHTML;
    document.body.innerHTML = "<div style='margin:10px'>" + printContents + "</div>";
    window.print();
    document.body.innerHTML = originalContents;
}

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...?

Answer 1

On the page that makes the initial AJAX call, create a hidden div as such:

<div style="display:none; background:url('myfile.jpg')"></div>

If the file is dynamically changed, change the background of the div prior to printing.