Интерфейс Observer API + Foundation Interchange
Использование фреймворка 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, а затем покажите обновленное изображение.
Заранее спасибо за любые советы