document.addEventListener('DOMContentLoaded', () => {
  console.log('Инициализация Intersection Observer');

  const observerOptions = {
    root: null,
    rootMargin: '0px',
    threshold: 0.1
  };

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const el = entry.target;
        let currentPath = '';
        let isBackground = false;

        if (el.tagName === 'IMG') {
          currentPath = el.getAttribute('src') || '';
        } else {
          const bg = el.style.backgroundImage || getComputedStyle(el).backgroundImage;
          const match = bg.match(/url\(["']?(.*?)["']?\)/);
          if (match) {
            currentPath = match[1];
            isBackground = true;
          }
        }

        if (currentPath && currentPath.includes('_0.')) {
          var slashPath = currentPath.split("_-s-_").join("/");
          slashPath = slashPath.replace('/spectro_speed/img', '');
          const newPath = slashPath.replace('_0.', '.');

          console.log(`Старт загрузки картинки: ${newPath}`);

          const tempImage = new Image();
          tempImage.src = newPath;

          tempImage.onload = () => {
            if (isBackground) {
              el.style.backgroundImage = `url("${newPath}")`;
            } else {
              el.src = newPath;
              if (el.hasAttribute('srcset')) {
                let srcset = el.getAttribute('srcset');
                srcset = srcset.split('_-s-_').join('/').replace(/\/spectro_speed\/img/g, '').replace(/_0\./g, '.');
                el.srcset = srcset;
              }
            }
            console.log(`Подмена завершена: ${newPath}`);
          };
        }

        observer.unobserve(el);
      }
    });
  }, observerOptions);

  const observeElements = (container = document) => {
    const imgElements = container.querySelectorAll('img[src*="_0."], img[srcset*="_0."]');
    imgElements.forEach(el => observer.observe(el));

    const bgElements = container.querySelectorAll('[style*="background"][style*="_0."]');
    bgElements.forEach(el => observer.observe(el));
  };

  observeElements();

  const mutationObserver = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === Node.ELEMENT_NODE) {
          if (node.matches('img[src*="_0."], img[srcset*="_0."], [style*="background"][style*="_0."]')) {
            observer.observe(node);
          }
          observeElements(node);
        }
      });
    });
  });

  mutationObserver.observe(document.body, {
    childList: true,
    subtree: true
  });
 });