JavaScript 中缺少图像的打印弹出窗口答案

【问题标题】：Print popup in JavaScript missing imagesJavaScript 中缺少图像的打印弹出窗口
【发布时间】：2013-07-08 19:27:09
【问题描述】：

我想打开一个新窗口/选项卡，在文档中放入一些 HTML，然后打开浏览器打印对话框来打印那个新窗口。我正在使用以下方法来完成此操作：

var w = window.open();
w.document.write(html);
w.document.close();

其中html 包含：

...<body onload="window.print()">...</body>...

这一切正常，弹出窗口，并为新页面显示打印对话框，但是，由于某种原因，浏览器在显示打印对话框之前没有等待页面上的所有图像加载。这导致某些图像无法打印。

有很多图像，它们是在服务器端动态生成的（每张大约需要 1 秒才能加载）。如何强制浏览器仅在加载所有图像后打印？

这发生在我已确认的 Chrome 和 Firefox 中。感谢您的帮助。

【问题讨论】：

标签： javascript html browser printing cross-browser

【解决方案1】：

尝试将您的打印机调用放入最后一张图像的 onload 事件中。

<img onload="window.print()" ... />

编辑：

OP 的完整答案如下所示：

我以@chockleyc 的回答为灵感提出了以下脚本。我不能只使用最后一张图片，因为它们不一定按顺序加载。以下脚本将在所有图像加载后打印页面（使用 jQuery）：

var hasPrinted = false;
$(document).ready(function(){
  $('img').load(function(){
    var imgs = $('img');
    var loadedAll=true;
    for(var i=0;i<imgs.length;i++){
      loadedAll &= $(imgs[i])[0].complete;
    }
    if (loadedAll && !hasPrinted) {
      console.log('printing');
      hasPrinted = true;
      window.print();
    }
    else {
      console.log('not all images have loaded');
    }
  })
});

【讨论】：

我明天早上试试这个。感谢您的帮助！
我以您的回答为灵感，想出了一个可行的解决方案。但是，我认为仅在最后一张图像中设置它不会起作用，因为图像不一定按顺序加载。谢谢！
感谢您接受我的回答，但为了了解其他人，您使用的解决方案是什么？如果您将其发布在 cmets 中，我将更新我的答案以将其包含在编辑中，以便其他人可以看到它。
在我的回答中。如果您更新答案，那就太好了。谢谢

【解决方案2】：

尝试将其从 body.onload 事件更改为 window.onload 事件。

w.window.onload = window.print()

或者类似的东西。

【讨论】：

我确实尝试将<script type="text/javascript">window.onload = window.print;</script> 放在页面上，虽然它确实打印了，但我仍然遇到图像丢失的相同问题。经过一些研究，<body onload="..."... 似乎等同于 window.onload。 stackoverflow.com/questions/191157/window-onload-vs-body-onload。谢谢你的帮助。明天我会再试一次，并确认它不起作用。