title: Print css, only load images at print time
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>I've also tried using onbeforeprint javascript, but again, this is mess of browser inconsistency.</p>
  
  <p>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. </p>