Our user research shows that many of our users workaround slow internet connections by saving webpages and sharing them with each other via Whatsapp.
We lazy load images on Wikipedia to save our users data.
Users typically print by using the browser print method.
When printing an article, any lazy loaded images are not present in the printed version of the page.
We would like to detect when a user is printing a webpage and load images via JavaScript.
Developer notes
Although it is not possible to download images during the print dialog, we can notify the user when images are not present in the article via a banner at the top of the page. The banner would be added on page load, positioned at the top of the page, but only displayed on print media. When all images are downloaded this banner would be removed.
Medium does this like so:
Note: Although not widely supported, architecture wise this should be expected to work on the Vector skin when useformat=mobile is applied given lazy loading is a "m. domain" concept, not a Minerva concept.
TODO
- In the HTML there should be an error box that is only shown in print mode. The message should read "Images in this article have not finished loaded. Please close this dialog and press the download button again."
- When print is clicked all lazy loaded images should be loaded. When the loading has completed the error box above is removed.
- Use the errorbox styles in mobile.messagebox.styles, since this is only needed for JS users it's okay for these styles to be loaded with JS.