Печать Div с изображениями

Question

Я работаю над приложением MVC C#, в котором содержимое div состоит из вызова AJAX, который извлекает поля базы данных и возвращается как сообщение об успешности JavaScript. Строка (тривиальный пример):

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

затем печатается:

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 принтами отлично в большинстве случаев, но есть изображение там что печатает тогда и только тогда, когда это было загружен ранее. Я бы хотел, чтобы он всегда печатал. Я попытался добавить скрипт предварительной загрузки в строку содержимого. Я могу использовать только чистый JavaScript, а не jQuery, и весь CSS должен быть встроенным. Каковы мои возможности для загрузки изображения? Должен ли я приостановить выполнение, чтобы дождаться загрузки DOM, назначьте изображение в качестве скрытого фона div на вызывающей странице или ...?

Answer 1

На странице, которая делает первоначальный вызов AJAX, создать скрытый DIV так:

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

Если файл динамически изменяется, изменить цвет фона на DIV перед печатью.

Answer 2

Если вы хотите по-прежнему иметь возможность изменить изображение динамически, у меня было очень схожие проблемы и обнаружил, что ждет изображения для загрузки работало достаточно хорошо:

var image = Image(); 
image.onload(function() { 
    //print the screen, or do whatever 
}); 
image.src = "whateverImgSrc";