User:Jdlrobson/lazyloader

I wanted to show a novel usecase for service workers - a modern method for lazy loaded images. I'm still not sure whether what I am doing is breaking the web... I mean I can still curl the page and get the HTML complete with all the nice image urls.

This implements a service worker that lazy loads image downloads for logged in users with the script install on Wikipedia (specifically aimed at minimising the data downloaded my mobile users). To add to your Wikipedia experience, register an account and add the following to your user minerva.js file:

importScript( 'User:Jdlrobson/lazyloader.js' );

This installs a script that on first-load will register a ServiceWorker which intercepts all page network requests and using a regular expression substitutes all `srcset` and `src` attributes with data- equivalents that can be loaded via JavaScript. The script will then only load images when you scroll to them. Right now I'm keeping it super simple and only loading when they appear in the viewport. A future iteration would be a bit more clever about this e.g. loading images only when a section is expanded or when the image is say 2 viewports away.

I'm interested in how this impacts the Wikipedia experience on 2G connections. Early investigations show 2G connections can't get their Barack Obama fix! Annoyingly given the service worker runs on /w/ directory the only way to invoke it is to visit pages using w/index.php prefix but due to some bug this doesn't run the JavaScript...

Feedback welcomed on my Twitter post :-)