A progressive image loader for Silverstripe 4
This module does progressive image loading, based partly on Medium image loading techniques, using IntersectionObserver (v1)
Browser support for IntersectionObserver (currently all the important ones).
Call the thumbnail rendering methods directly within your template:
<% with $Image %> $ProgressiveFill(420,280,90) <% end_with %>
In place of
<% with $Image %> $Fill(420,280) <% end_with %>
When one of the
$Progressive* methods is called, Requirements will automatically be added via the Requirements API, these are loaded via data: uris with SRI hashes supplied
NSWDPC ProgressiveImage ProgressiveImage.ss -> template containing HTML loading the image Script.ss -> provides the JS to handle image replacement Style.ss -> provides CSS to assist with image replacement
A thumbnail with 10% of the width/height of the requested size and a quality of 1 will be created. This will be the main image to load.
The final image will be created using the requested size and quality (420x280 @ 80% quality in the ProgressiveFill example above)
When the page loads, the tiny, low quality image will display by default, once the image scrolls or appears in the viewport, the larger image will load, thanks to IntersectionObserver.
To support Content Security Policies (CSP), the controller extension loading inline scripts and css plus related templates have been removed.
Module rating system helping users find modules that are well supported. For more on how the rating system works visit Module standards
Score not correct? Let us know there is a problem