Problem
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.
Design
Step1: show the download action
Step 2: download action will trigger standard spinner in place of the icon
Step 3: PDF with images in the print mode
Note: ignore the fact that this mock is on iOS, that is just convenient to produce --
For non-js browsers
This feature of fetching images will not available on non-js browsers as of. they will recieve pdf's without the images that are not in the DOM
It just works.
Non js browsers will have already loaded images due to our fallbacks e.g. noscript tag or minimum js.
Developer notes
As 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.
Open questions before sign-off
- is the 3seconds timeout enough to load most of images on production servers for mobile devices?
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
Testing plan
Using mobile mode on beta cluster or http://reading-web-staging.wmflabs.org/ visit articles with many images (ex: Barack Obama).
- onClick it tries to load all lazy-loaded articles (check the network tab)
- the print preview/printed article should contain all images, not only the one from the top)
- spamming button brings only one print window
- try to print, dismiss print dialog, button should be in "download" state and it should be possible to trigger print action once again
- once all images are loaded, click should bring the print dialog immediately
Please use mobile devices using cellular connection to verify that 3s delay is more than enough to download most of the images.
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
