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

经过几个小时的实验后，我得出结论，截至今天，在渲染打印就绪文档之前，Web浏览器不会等待打印专用样式表中指定的任何外部资源完全下载。

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

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

Answer 2

好点，我遇到了同样的情况，我发现了一个通过CSS预加载图像的技巧：这不是最好的方法，因为我每次都加载图像：/

如果我拿你的代码：

print.css

.h1:before {
      content: url(IMAGE_URL_HERE); 
}

screen.css

h1 {
       background: url(IMAGE_URL_HERE) no-repeat -9999px -9999px; 
      //img not displayed but loaded
}

问候

在打印介质中加载外部图像

2 个答案: