JavaScript - резервные копии с отложенной загрузкой изображений не отображаются в iOS11 Safari

Question

Я создал скрипт, который использует элемент с откатами webp и jpg с некоторой отложенной загрузкой для обслуживания изображений очень высокого качества.Пока что он отлично работает во всех «современных» браузерах, кроме iOS11 Safari.

Я реализовал запасной вариант для IntersectionObserver, поскольку я знаю, что это еще не полностью поддерживается, который использует getClientBoundingRect (), чтобы найти позициюизображения в окне просмотра.Я проверил на iOS 10, 11, а затем обновил одно из тех же устройств до iOS 12, где изображения начали загружаться.

<div class="lazy-container">
            <picture class="lazy-thumbnail">
                <source srcset="{{ asset( '/images/media/placeholders/3.webp' ) }}" type="image/webp">
                <source srcset="{{ asset( '/images/media/placeholders/3.jpg' ) }}" type="image/jpeg">
                <img class="" src="{{ asset( '/images/media/placeholders/3.jpg' ) }}" />
            </picture>
            <picture data-lazy>
                <source data-srcset="{{ asset( '/images/media/3.webp' ) }}" type="image/webp">
                <source data-srcset="{{ asset( '/images/media/3.jpg' ) }}" type="image/jpeg">
                <img class="" src="{{ asset( '/images/media/3.jpg' ) }}" />
            </picture>
        </div>

const lazyObserver = new IntersectionObserver( ( entries, observer ) => {
            // Break into function to allow immediate calling
            const exchangeImage = ( image, source ) => {
                source.forEach( ( s ) => {
                    s.setAttribute( 'srcset',
                        s.getAttribute( 'data-srcset' ) );
                });
                image.previousElementSibling.classList.remove( 'lazy-thumbnail' );
                image.previousElementSibling.classList.add( 'ex-lazy-thumbnail' );
                image.classList.add( 'ex-lazy' );
                image.removeAttribute( 'data-lazy' );
                // If the image is in view and src has been swapped out, stop observing the image
                lazyObserver.unobserve( image );
            };
            entries.forEach( ( entry ) => {
                const image = entry.target;
                const source = image.querySelectorAll( 'source' );
                // If the image is either in view or data-lazy='immediate', load the image.
                if( entry.target.dataset.lazy === 'immediate' || entry.isIntersecting ){
                    exchangeImage( image, source );
                }
            });
        });

Элемент изображения должен пройти и загрузить первый srcset изображенияэто работает для браузера, webp в большинстве случаев, затем с этими выбранными JS должен запускаться, когда изображение находится в поле зрения, выгрузить srcset для data-srcset с большим изображением и загрузить.Это работает в любом браузере, кроме

.lazy-container {
  overflow: hidden;
  position: relative;

  picture {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;

    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }
}
.ex-lazy {
  filter: blur(0px);
  transition: all 500ms ease-in-out;
}
.lazy-thumbnail {
  opacity: 1;
  filter: blur(8px);
  transition: all 500ms ease-in-out;
  z-index: 1;
}
.ex-lazy-thumbnail {
  opacity: 0;
  filter: blur(0px);
  transition: all 500ms ease-in-out;
  z-index: 0;
}
[data-lazy]{
  width: 100%;
  height: auto;
  filter: blur(8px);
  transition: all 500ms ease-in-out;
}

Answer 1

Я решил это по-своему.Также посмотреть на polyfill может помочь polyfill

let images = document.querySelectorAll('source, img');

if ('IntersectionObserver' in window) {
  // we check if IntersectionObserver is supported by our browsers
  let config = {
    root: null,
    rootMargin: '0px',
    threshold: 0.5
  };

  let observer = new IntersectionObserver(onChange, config);
  images.forEach(function (img) { observer.observe(img) });

  function onChange(changes, observer) {
    changes.forEach(function (change) {
      if (change.intersectionRatio > 0) {
        // we stop observing and loading pictures
        loadImage(change.target);
        observer.unobserve(change.target);
      }
    });
  }

} else {
  // if IntersectionObserver is not supported, we load all photos
  images.forEach(function (image) { loadImage(image) });
}

function loadImage(image) {
  image.classList.add('fade-in');
  if (image.dataset && image.dataset.src) {
    image.src = image.dataset.src;
  }

  if (image.dataset && image.dataset.srcset) {
    image.srcset = image.dataset.srcset;
  }
}


// -- How to add polyfil

const modernBrowser = ('IntersectionObserver' in window);

if (!modernBrowser) {
  loadScripts([
    "./polyfills/intersection-observer.js"
  ])
}

function loadScripts(array, callback) {
  var loader = function (src, handler) {
    var script = document.createElement("script");
    script.src = src;
    script.onload = script.onreadystatechange = function () {
      script.onreadystatechange = script.onload = null;
      handler();
    }
    var head = document.getElementsByTagName("head")[0];
    (head || document.body).appendChild(script);
  };
  (function run() {
    if (array.length != 0) {
      loader(array.shift(), run);
    } else {
      callback && callback();
    }
  })();
}

<picture>
  <source media="(min-width: 400px)" data-srcset="https://place-hold.it/400x400/15252D/fff">
  <source media="(min-width: 200px)" data-srcset="https://place-hold.it/200x200/15252D/fff">
  <img data-src="https://place-hold.it/100x100/15252D/fff">
  <noscript><img src="https://place-hold.it/100x100/15252D/fff"></noscript>
</picture>

Рабочий код