打印样式表，仅在打印时加载图片。

Question

我目前正在开发一个复杂的打印样式表，它在某些方面与当前屏幕上显示的HTML不同。我在性能和实现所需布局之间遇到了障碍。

基本上，有一个图像库，这些图像是通过javascript动态加载的。图像是通过JS动态构建并在每次请求下一个图像时输出到DOM中。

我的问题在于，我需要为打印目的构建此内容。我认为我只能在页面上构建额外的HTML以使打印页面正确显示；这不是太大的问题，但是图片相当大，即使使用"display:none"和media print { display:block; }，也无法防止桌面设备在后台由浏览器下载图片。实质上，我需要它们在屏幕上保持休眠状态，并使用打印样式才能唤醒。

我曾考虑使用CSS背景图像属性-我认为这不会导致浏览器中的图像加载，但是背景图像似乎无法可靠地在不同的浏览器中打印。

我还尝试使用onbeforeprint javascript，但再次遇到了浏览器不一致的问题。

有人能提出任何解决方案吗？目前看来，我将不得不承受所有图像的额外开销以实现可靠的结果。

- Squiggs.

---

你曾经解决过这个问题吗？我也有同样的问题，希望能够在印刷媒体中显示生成的二维码，但不想在浏览器中显示。也许需要为打印而设计备用页面布局。 - John Rix

@JohnRix - 不完全是。我们开发了一个单独的页面，并在页面上包含了打印按钮，这样可以更好地控制呈现的内容。目前浏览器中与打印交互的状态并不能提供所需的功能。 - Squiggs.

没问题，谢谢你告诉我！ - John Rix

Answer 1

如果背景图片是一个选项，您可以通过将图像容器的父元素设置为display: none来防止下载这些背景图片。

示例HTML：

<div class="invisible">
    <div class="img-container">
    </div>
</div>

相关的CSS：

.invisible {
    display: none;
}

.img-container {
    background: url(img.xyz);
}

@media print {
    .invisible {
        display: block;
    }
}

除此之外，还有一个类似的问题被问到过：防止图片加载。

如果背景图片绝对不是选项的话，也许那个问题能帮到你。

- Marco Hengstenberg

---

谢谢，但是大多数浏览器默认情况下不会打印背景图片。目前正在探索将图像包装在无脚本中以查看发生了什么。 - Squiggs.