css - 在打印媒体中加载外部图像

Question

只有在打印页面时，标题的右侧才应该有图像。我声明了以下样式表:

@media print {
  h1::after {
    content: url( IMAGE_URL_HERE );
    position: absolute;
    top: 0;
    right: 0;
  }
}

问题是图像不会出现在(任何浏览器的)打印预览中。但是，如果我关闭并重新打开打印预览对话框，图像就会正常显示。

你可以尝试自己复现:http://jsbin.com/gevefivi

我有什么地方做错了吗？或者这是预期的行为吗？

更新:我认为这与引擎打印布局渲染中的竞争条件有关，因为当我引用本地镜像时，它始终显示在打印预览中并且打印得很好。

更新: 看起来打印引擎确实不会在加载 content: url() 中的外部资源之前等待，而是生成 PDF 文件供预览，这就是为什么有如果图像获取需要一些时间才能完成，则那里没有图像。但它确实会发送 HTTP 请求并将其保存在本地以备下次使用。所以这就解释了为什么第二次打开打印预览时它通常工作正常。

我使用以下 PHP 文件作为外部资源对其进行了测试:

<?php

sleep(5);

// Create a blank image and add some text
$im = imagecreatetruecolor(120, 20);
$text_color = imagecolorallocate($im, 233, 14, 91);
imagestring($im, 1, 5, 5,  'A Simple Text String', $text_color);

// Set the content type header - in this case image/jpeg
header('Content-Type: image/jpeg');
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

// Output the image
imagejpeg($im);

// Free up memory
imagedestroy($im);

它只在 5 秒内返回图像。要重现此问题，请确保上面的 PHP 文件位于您的本地服务器上，或者最坏情况下位于您的本地网络中。在 content: url() 中引用它并打开“打印预览”对话框。你不会看到图像。关闭对话框。打开对话框，您仍然看不到图像。等待 2-3 秒。打开它，您将看到获取和缓存的图像。如果删除 sleep(5); 行，您应该会看到第一次打开“打印预览”对话框时的图像。

仍然很想知道这是一个错误还是预期的行为，以及目前是否有可行的解决方案。

Answer 1

经过几个小时的试验，我得出结论，截至目前，网络浏览器不会等待打印特定样式表中指定的任何外部资源在呈现打印就绪文档之前完全下载。

因此，似乎在页面的打印版本中显示外部资源的唯一方法是至少在用户决定打印之前下载它们(通过 html 标签、屏幕样式表或 javascript，并不重要)页面。

而且，不，这似乎不是错误，而是当前主要供应商接受的标准。