JavaScript-延迟加载图像回退不'；不会出现在iOS11 Safari上

我已经创建了一个脚本，它使用webp和jpg元素，并通过一些延迟加载来提供高质量的图像。迄今为止，除了iOS11 Safari之外，它在所有“现代”浏览器中都能完美运行

.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;
}

我已经为IntersectionObserver实现了一个回退，因为我知道它还不完全受支持，它使用getClientBoundingRect（）来查找图像在视口中的位置。我已经在iOS 10和iOS 11上进行了检查，然后将其中一台设备升级到iOS 12，图像开始加载

picture元素应该遍历并加载第一个适用于浏览器的图像srcset，在大多数情况下是webp，然后选择这些，当图像在视图中时，JS应该运行，将srcset替换为带有大图像的数据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;
}

我用自己的方式解决了这个问题。 另外，看看polyfill是否有帮助

let images=document.querySelectorAll（'source，img'）；
如果（'IntersectionObserver'在窗口中）{
//我们检查我们的浏览器是否支持IntersectionObserver
让配置={
root:null，
rootMargin:'0px'，
阈值：0.5
};
让observer=新的IntersectionObserver（onChange，config）；
forEach（函数（img）{observer.observe（img）}）；
功能更改（更改、观察者）{
更改。forEach（函数（更改）{
如果（change.intersectionRatio>0）{
//我们停止观察和加载图片
loadImage（change.target）；
观察者不观察（改变目标）；
}
});
}
}否则{
//如果IntersectionObserver不受支持，我们将加载所有照片
forEach（函数（图像）{loadImage（图像）}）；
}
函数loadImage（图像）{
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；
}
}
//--如何添加polyfil
const modernBrowser=（“IntersectionObserver”在窗口中）；
如果（！modernBrowser）{
加载脚本([
“/polyfills/intersection observer.js”
])
}
函数加载脚本（数组、回调）{
变量加载器=函数（src，handler）{
var script=document.createElement（“脚本”）；
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）；
};
（函数运行（）{
如果（array.length！=0）{
加载程序（array.shift（），run）；
}否则{
callback&&callback（）；
}
})();
}

---

施展了一种魅力，老实说，我真不敢相信自己是个白痴，而且想得太多了。非常感谢。