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

Posted 2023-03-11

【中文标题】延迟加载图像在 iPhone 浏览器中不起作用

【英文标题】：Lazy-loading images is not working in iPhone browser

【发布时间】：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 库。

【参考方案1】：

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