I'm not sure I'm following your thoughts here Acorn. Your demo works very well. It only loads images as required (i.e. Lazy). However so does my method.

Add the Website Code (head) CSS to your site.
Not required by my method, instead it loads a .js file named functions.js on website Head once.

For each image, add a new CSS ClassName rule that invokes the image as a background.
My method does a similar thing loading individual images into a placeholder on a single pop-up layer (not numerous pop-up layers)

In a pop-up layer create a sized Box with Placeholder code (body): <div class="lazy ClassName"></div>.
Mine has a similar placeholder with the following:</div>.<img id="myImg" src="https://parkeston.com/xara/big-images/images/myImg@2x.jpg" width="1204" height="675">

Add a Thumbnail to MouseOff, basically, anything that open the image pop-up layer.
As these thumbnails require to load on page load there is no point in loading them via a placeholder.

Embellish with Web Animations, delays and speed of presentation; anything you can add to a layer.
My metod also allows this but as my aim is to reduce the requirements of pop-up layers to a single pop-up layer then only one transition can be applied.

The big image is only loaded when its pop-up layer is triggered.
Ditto, the same Lazy loading.