With the recent work on T179914, we would like to download all lazily loaded images at print time so they appear as pictures instead of greyed out boxes.
As [[ https://phabricator.wikimedia.org/T162414#3169196 | discussed previously ]], concerning the issues of printing lazy loaded images with a print button, we have full control of loading images before print. Baha previously did a POC demonstrating this to be possible.
To support this, we'll need to make some changes to the Skin class inside MobileFrontend.
= Acceptance criteria
[] Skin class should have a function that allows the loading of images. This works like the loadImages class however drops the isElementCloseToViewport check. In order to keep this DRY a refactor of loadImages is likely - either to add a parameter or to add an additional method loadAllImages
[] While the load event inside Skin::loadImage is important when rendering the page view, it is not helpful when printing as it means images cannot progressively load. It should be possible when loading all images to synchronously injecting the images in the page. When doing this, it defers the problem of completing the loading of the images to the printer.
= Sample code
```
$('#content').find( '.lazy-image-placeholder' ).toArray().forEach((placeholder)=> {
var $placeholder = $( placeholder ),
width = $placeholder.attr( 'data-width' ),
height = $placeholder.attr( 'data-height' ),
$downloadingImage = $( '<img>' ).attr( {
'class': $placeholder.attr( 'data-class' ),
width: width,
height: height,
src: $placeholder.attr( 'data-src' ),
alt: $placeholder.attr( 'data-alt' ),
style: $placeholder.attr( 'style' ),
srcset: $placeholder.attr( 'data-srcset' )
} );
$downloadingImage.addClass( 'image-lazy-loaded' );
$placeholder.replaceWith( $downloadingImage );
});
// async timeout allows images to begin downloading before print occurs.
setTimeout(() => {
window.print();
},1000)
```
= Open questions
[] If loading images is taking considerable time e.g. say 5 seconds, it's not clear whether we should show an intermediate display - e.g. turn the download button into a spinner or show some kind of dialog to the user informing them we are preparing the document for printing or