使用Zurb Foundation框架。它具有一个称为Foundation Interchange的组件，用于提供响应图像。
请参见https://foundation.zurb.com/sites/docs/interchange.html
虽然它确实基于视口提供图像，但它不支持延迟加载，我们希望使用Intersection Observer API来延迟加载某些图像。
请参见https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/
目标：
当我们选择延迟加载某些内容并为IMG提供类“ lazy”时，Foundation Interchange会提供低分辨率/小占位符图像。这部分很容易。然后使用Intersection Observer来更改路径中的一个文件夹，使其指向高分辨率图像。这是最困难的部分。
重要说明：
大多数技术都行不通，因为我们正在加载响应图像，所以我不能简单地指向一张随视口而变化的图像。
我们想对任何图像应用一个类，并使其延迟加载基于Intersection Observer的另一个图像。它将立即加载低分辨率的小图像，然后稍后将其换出另一个高分辨率的图像。
我们不想像大多数解决方案一样使用data-src，而是要更改图像的路径。
例如，假设SRC为：
<img class=”lazy” src="assets/img1/test-blur2.jpg">
我想让Observer观看并更改图像路径，如下所示：
<img class=”lazy” src="assets/img/test-blur2.jpg">
换句话说，我想用class=lazy查找图像并删除/ img后的“ 1”，然后显示更新的图像。
提前感谢任何提示