3

I'm currently developing a complex print style sheet which is in some ways different from the HTML currently displayed on screen. I've hit a hurdle with a balance between performance and achieving the desired layout.

Basically there is a gallery of images which are loaded via javascript on the fly. Images are built dynamically via JS and output to the DOM on each request for the next image.

My problem lies in that I need to build this for printing purposes. I think I'm left with a scenario where I will have to build additional html on the page just for the print page to look correct; that isn't so much of a problem, except the images are rather big, and even using "display:none" and media print { display:block; } won't prevent the images from being downloaded on desktop devices behind the scenes by the browser. In essence I need them to stay dormont on screens, and come to life using print styles.

I had considered using the css background-image property - which I believe doesn't cause the image to load in the browser, however background image doesn't seem to reliably print across different browsers.

I've also tried using onbeforeprint javascript, but again, this is mess of browser inconsistency.

Can anyone suggest any sort of solution for this? at the moment it seems like I'm going to have to suck up the additional overhead of all the images to achieve reliable results.

Squiggs.
  • 4,299
  • 6
  • 49
  • 89
  • Did you ever find a solution to this? Have the same question, where I want to display generated QR Codes in printed media but not in browsers. Perhaps an alternate page layout for printing will be needed. – John Rix Mar 12 '19 at 10:08
  • @JohnRix - not really. we developed a separate page, and included the print button on the page which gives more control over what is rendered. Currently state of interaction with print in the browser doesn't provide exactly what was needed. – Squiggs. Mar 12 '19 at 22:43
  • No worries, thanks for letting me know! – John Rix Mar 13 '19 at 09:15

1 Answers1

0

If background images are an option, you could prevent the download of those when setting the parent element of the image container to display: none

Example HTML:

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

Related CSS:

.invisible {
    display: none;
}

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

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

Apart from that a similar question had been asked: Prevent images from loading

May be that will help you, if background images are definitely NOT an option.

Community
  • 1
  • 1
Marco Hengstenberg
  • 824
  • 5
  • 15
  • Thanks, but background images don't print by default in most browsers. Currently exploring wrapping the images in a no-script to see what happens – Squiggs. Sep 10 '15 at 13:50