With T246838 browsers that do not support MutationObserver will load all images on page load. This is not ideal and we'd like to replace it with a click to load pattern. This will mean images will get loaded only owhen the image is clicked/tapped by the reader.

@alexhollender feel free to suggest better solutions.

Analysis/background by Peter

I've been testing our new Kai OS application but I also tested our current mobile web on Kai OS device. As I said before, it looks good, a couple small fixes and would almost be perfect.

The main problem is scrolling, the frames per second can be really slow. On a Kai OS device you don't swipe instead you press a key to scroll. I've recorded two example so you can see what looks like:

This is start page, it scrolls as other web sites do, it looks good!

But for articles with lazy loaded images it is really slow (I keep pressing the button to scroll as fast as possible):

Kai OS runs on a modified version of Firefox 48, so you can connect to it with an old Firefox WebIDE. Looking at time spent it looks like this:

There's a lot of time spent if checking elements is in the viewport. @Jdlrobson do you have an idea of how we could improve it? Is it triggered now for every scroll, so every key press will generate a check?

Developer notes

Once https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/587893 is done this should be rather straight forward - you can add a click handler for the events. The question is what feedback we should give to the user.