延迟加载图像在 iPhone 浏览器中不起作用答案

【问题标题】：Lazy-loading images is not working in iPhone browser延迟加载图像在 iPhone 浏览器中不起作用
【发布时间】：2019-09-01 18:21:52
【问题描述】：

在 iPhone 8s Plus (iOS 11.4) 浏览器中延迟加载图像不起作用。它确实适用于 iPhone 8 (iOS 12.4)、Android 以及 mac 上的 safari 和 mac 上的 chrome。

不适用于 iPhone 8s Plus 上的 safari 或 chrome 应用程序。

我该怎么做才能让它在所有设备上工作或在某些设备上禁用它？

谢谢。

这是我的延迟加载代码： JS：

const targets = document.querySelectorAll('.gallery-image');

const imgOptions = {
    threshold: 0,
    rootMargin: "0px 0px 500px 0px" 
};

const lazyLoad = target => {
  const io = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {

      if (entry.isIntersecting) {
        const img = entry.target;
        const src = img.getAttribute('data-lazy');

        img.setAttribute('src', src);
        img.classList.add('fade');

        observer.disconnect();
      }
    });
  }, imgOptions);

  io.observe(target)
};

targets.forEach(lazyLoad);

HTML：

<script language="JavaScript" type="text/javascript" src="http://192.168.0.118:8006/js/jQuery.js"></script>

<div id='item' class='tall'>
  <img class='gallery-image' data-lazy='images/one.jpg' data-fullsize='images/one.jpg'/>
</div>

<script src="http://192.168.0.118:8006/js/lazy-load.js"></script>

【问题讨论】：

嗨@FredrikBurmester，你能让它工作吗？
@Shailesh no 我使用了另一个 JS 库。

标签： javascript html ios iphone lazy-loading

【解决方案1】：

我无法确定您直接提供的代码中的原因，但您可以使用我为这方面开发的 polyfill，它适用于所有这些浏览器，甚至还为您提供优雅降级等方面在没有js等的情况下：https://github.com/mfranzke/loading-attribute-polyfill

【讨论】：