JSFiddle - React, Tailwind, and code Playground

HTML

<div class="printing-not-ready">
Images are still loading please cancel your preview and try again shortly.
</div>
<div class="do-not-print">
  <h1>
  My super awesome page!
  </h1>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
<p>
Birds and sunsets sure are pretty!
</p>
</div>

CSS

.printing-not-ready{
  display:none;
}
@media print{
  .printing-not-ready{
    display:block;
  }
  .do-not-print{
    display:none;
  }
}

JavaScript

img = document.querySelector('img');
var isPrinting = window.matchMedia('print');
isPrinting.addListener((media) => {
  if (media.matches) {
    img.src = 'http://unsplash.it/500/300/?image=705';
    img.onload = ()=>{
    	document.querySelector(".printing-not-ready").remove();
      document.querySelector(".do-not-print").className=""
    }
  }
})