DataMaps should only be initialized when it is in the viewport

[alistair3149]

Is your feature request related to a problem? Please describe. Currently DataMaps initializes on page load, regardless of whether the user will be interacting with it or not, which adds up to the load time of the page. If the user does not end up interacting with the map, then all of the time spent on scripting and the time on loading the images are wasted (it can be especially bad on maps with a lot of custom images).

For example on: https://tolkiengateway.net/wiki/Map:The_West_of_Middle-earth_at_the_End_of_the_Third_Age/test The map is composed of 160+ images as tiles. Without lazyloading, it means that the user is always downloading 160+ images even though they are not using it. That is especially problematic when the map is only used as a embed snippet such as in the infobox.

Describe the solution you'd like

• [x] DataMaps should only be initialized when it comes into the viewport of the user (probably through IntersectionObserver.
• [x] Adding the loading property to all <img> elements, that will prevent them being downloaded even when they are not needed (most noticeably in images used in non-interacted popups), saving bandwidth on both the client and the server.

[alex4401]

Claiming lazy initialisation.