Not the solution (yet) but I am sure siran will rise to the challenge.
I use this approach for rollover images that are blurred to sharp. All I have done is deferred the image loading until needed (on hover).
What I have created is a deferred or hover:lazy-loading of a rollover image that replaces the block placeholder with a higher definition one.
All this needs is for the image not to offer up an src, which results in an immediate fetch.
I replace the IMG with a blank DIV and a ClassName.
I use CSS to add a background-image (this is url(image_address)), which only fetches the blocky placeholder.
On hover, the rollover background image is fetched and replaces the original.
Normally, one would place the hires images in a separate folder, but as I am trying to demonstrate this all in Xara, you must do the following:
- First, in the demo file, Shift+F5 to Preview the images page. This pre-loads the hires images into the index_htm_files/ folder. [Not really needed, I was being over-cautious, just Preview Website]
- Second, Preview the Website (F5); the index file opens and open your preferred browser from the Preview icon.
- Third, in your browser, go to Developer Tools (F12) > Sources and open the index_htm_files/ folder. The only file for the image will be the placeholder one.
As you hover over the images, the hires one is called up.
Use Ctrl+F5 to clear the cache to replay the lazy-loading.
A Placeholder image similar to:
Code:
<img src="index_htm_files/Marbles_64x64.jpg" width="100%" height="100%" style="filter:blur(2px);" />
A rollover with replacement is simpler:
Code:
<div class="marbles size128"></div>
All have the Class "marbles"; they then have options for another Class "size128 | size256 | size512 | (default)"; the default omits this Class to present the original highest resolution image.
It relies on this CSS to do the heavy lifting.
Website Code (Head):
Code:
<style>.marbles {
box-sizing: border-box;
width: 100%; /* Width of new image */
height: 100%; /* Height of new image */
background-image: url(index_htm_files/Marbles_64x64.jpg);
background-size: cover;
blur(2px);
transition: background-image 0.4s ease-in-out;
}
.marbles:hover {
background-image: url(index_htm_files/Marbles.jpg);
background-size: cover;
}
.marbles.size512:hover {
background-image: url(index_htm_files/Marbles_512x512.jpg);
background-size: cover;
}
.marbles.size256:hover {
background-image: url(index_htm_files/Marbles_256x256.jpg);
background-size: cover;
}
.marbles.size128:hover {
background-image: url(index_htm_files/Marbles_128x128.jpg);
background-size: cover;
}
</style>
CSS - Marbles.xar
I picked a square 1024px image and halved its size down a number of times to 64px and gave all the images meaningful Image filenames.
The smaller images are for Variants. I stopped the placeholder at 64px but you could go all the way down to 1px square!
To achieve true lazy loading, the hover trigger need to be invoked while the image is about to enter the viewport.
The lores placeholder images are in place to prevent reflow of other DOM elements, though this is less important in a Xara design, it is still good practice.
Acorn
Bookmarks