Using Zurb Foundation framework. It has a component called Foundation Interchange to serve responsive images.
See https://foundation.zurb.com/sites/docs/interchange.html
While it does serve images based on viewport, it does not support lazy load and we want to lazy load some images using the Intersection Observer API.
See https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/
Objective:
When we choose to lazy load something and give an IMG the class "lazy", then Foundation Interchange serves a low res/small placeholder image. This part is easy. Then use Intersection Observer to simply change one folder in the path so it then points to the high res image. This is the harder part.
Important note:
Most techniques don’t work because we are loading responsive images so I can’t simply point to one image that varies depending on viewport.
We want to apply a class to any image and make it lazy load another image based on Intersection Observer. It will load a low res small image right away and then swap it out for another high res image later on.
Instead of using data-src like most solutions, we want to change the path to the image.
For example, assume the SRC is:
<img class=”lazy” src="assets/img1/test-blur2.jpg">
I want to have Observer watch and change the image path as follows:
<img class=”lazy” src="assets/img/test-blur2.jpg">
In other words, I want to look for images with class=lazy and delete the “1” after /img, and then show the updated image.
Thanks in advance for any tips