css - 打印 css，仅在打印时加载图像

Question

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

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

我的问题在于我需要为打印目的构建它。我想我会遇到这样一种情况，我必须在页面上构建额外的 html 才能使打印页面看起来正确；这不是什么大问题，除了图像相当大，甚至使用“display:none”和 media print { display:block;不会阻止浏览器在后台将图像下载到桌面设备上。从本质上讲，我需要它们在屏幕上保持休眠状态，并使用打印样式来实现。

我考虑过使用 css background-image 属性——我相信这不会导致图像在浏览器中加载，但是背景图像似乎无法在不同的浏览器中可靠地打印。

我也尝试过使用 onbeforeprint javascript，但同样，这是浏览器不一致造成的困惑。

任何人都可以为此提出任何解决方案吗？目前看来我将不得不承担所有图像的额外开销才能获得可靠的结果。

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;
    }
}

除此之外，还提出了一个类似的问题:Prevent images from loading

如果绝对不能选择背景图片，那可能会对您有所帮助。