Как внедрять картинки и ускорять их.

lazy-load

Всё о важности картинок и их ускорении

Отложенная загрузка для Яндекс Карты.
Появляется если доскролить до нужного места, но на всякий случай есть ещё и триггеры на наведение мышкой, клик и пр.

<!-- размер контейнера под размер карты и цвет окраски в стиле сайта -->
<div id="wsmainmap" style="display: block; width: 100%; height: 680px;background-color: #0078881a;">

<!-- скрипт карты, которой даём нужное ID и переделываем SRC в DATA-SRC  -->
<script type="text/javascript" charset="utf-8" async id="map_wslazy" data-src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A982500c531973a06e0aa07174eafc6dbaabfdf0cf8785f8e326da852e1963c32&amp;width=100%25&amp;height=680&amp;lang=ru_RU&amp;scroll=true"></script>

</div>

<script>
        let map_container = document.getElementById('wsmainmap');
        let options_map = {
            once: true,
            passive: true,
            capture: true
        };
        map_container.addEventListener('click', start_lazy_map, options_map);
        map_container.addEventListener('mouseover', start_lazy_map, options_map);
        map_container.addEventListener('touchstart', start_lazy_map, options_map);
        map_container.addEventListener('touchmove', start_lazy_map, options_map);
        
        var iObserver = new IntersectionObserver(function(entries) {
            if (entries[0].isIntersecting === true) {
                start_lazy_map();
            }
        }, {threshold: [0]}); // от 0 до 1, % видимой части элемента на экране

        iObserver.observe(map_container);

        let map_loaded = false;
        function start_lazy_map() {
            if (!map_loaded) {
                let map_block = document.getElementById('map_wslazy');
                map_loaded = true;
                map_block.setAttribute('src', map_block.getAttribute('data-src'));
                map_block.removeAttribute('data-src');
                console.log('YMAP LOADED');
            }
        }
</script>

Источник: https://codepen.io/fe-nix/pen/PoQvxQa

let observer = new IntersectionObserver(
  function (entries) {
    for (let i in entries) {
      let el = entries[i].target;
      if (entries[i].isIntersecting === true) {
        if (el.dataset.srcset) {
          el.setAttribute("srcset", el.dataset.srcset);
        } else {
          el.removeAttribute("srcset");
        }
        el.addEventListener(
          "load",
          function () {
            el.classList.add("loaded");
          },
          { passive: true }
        );
      }
    }
  },
  { threshold: [0], rootMargin: "100px 0px 100px 0px" } // Здесь вы выбираете на сколько пикселей вверх право низ и лево будут элементы будут считаться внутри вьюпорта и начинут загружаться в текущем примере 100 пикселей сверху и снизу.
);

document.addEventListener(
  "DOMContentLoaded",
  function () {
    let mas = document.querySelectorAll(".lazy"); // Слектор для изображений, здесь используется .lazy
    for (let i = 0; i < mas.length; i++) {
      observer.observe(mas[i]);
    }
  },
  { passive: true }
);

---

Пример вставки:

<img src="https://perfscan.ru/static/gallery/img/320/002.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" width="320" height="180" decoding="async" class="lazy">

<img src="https://perfscan.ru/static/gallery/img/320/003.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-srcset="https://perfscan.ru/static/gallery/img/640/003.jpg 2x" alt="" width="320" height="180" decoding="async" class="lazy">

LazyLoad для загрузки картинок при помощи CSS background

<style>
.wsBgLazy{background-image: none !important;}
</style>

<div class="wsbglazy" data-bgimgurl="image.jpg"></div>
<div class="wsbglazy" data-bgurl="image.jpg"></div>
<div class="wsbglazy"></div> <!-- картинка прописана где-то в CSS файлах стилей -->

<script>
    const wsBgObserver = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                let wsEl = entry.target;
                if (wsEl.dataset.bgurl) {
                    wsEl.style.background = "url('"+wsEl.dataset.bgurl+"') 0 0 no-repeat";
                }
                else if(wsEl.dataset.bgimgurl) {
                    wsEl.style.backgroundImage = "url('"+wsEl.dataset.bgimgurl+"')";
                }
                wsEl.classList.remove("wsBgLazy");
                wsEl.classList.add("wsBgLoaded");
                wsBgObserver.unobserve(wsEl);
            }
        });
    });

    document.addEventListener(
        "DOMContentLoaded",
        function () {
            const wsBgMass = document.querySelectorAll(".wsBgLazy");
            wsBgMass.forEach((el) => {
                wsBgObserver.observe(el);
            });
        },
        { passive: true }
    );
</script>