Re: Loading high resolution images.
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.
Egg
Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host
Bookmarks