Использование фреймворка 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 класс «ленивый», тогда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 и удалить «1» после / img, а затем показать обновленное изображение.
Заранее спасибо за любые советы