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

<!-- 引入IntersectionObserver Polyfill -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>

function lazyLoadImages() {
    const images = document.querySelectorAll('img[data-src]');

    function checkImage(event) {
        images.forEach(img => {
            if (img.getBoundingClientRect().top <= window.innerHeight && img.getBoundingClientRect().bottom >= 0) {
                const src = img.getAttribute('data-src');
                if (src) {
                    img.src = src;
                    img.removeAttribute('data-src');
                }
            }
        });
    }

    window.addEventListener('scroll', checkImage);
    window.addEventListener('resize', checkImage);
    window.addEventListener('orientationchange', checkImage);

    // 初始检查
    checkImage();
}

document.addEventListener('DOMContentLoaded', lazyLoadImages);

<!-- 引入lazysizes库 -->
<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js" async=""></script>

<!-- 使用lazysizes实现延迟加载 -->
<img data-src="image.jpg" class="lazyload" />