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

基础概念

JavaScript延迟加载图像（Lazy Loading Images）是一种优化网页性能的技术，它只在用户滚动到图像位置时才加载图像，而不是一次性加载所有图像。这样可以减少初始页面加载时间，提高用户体验。

问题描述

在iOS 11的Safari浏览器上，JavaScript延迟加载图像可能会出现回退问题，即图像无法正常加载。

原因分析

iOS 11的Safari浏览器对某些JavaScript API的支持不够完善，特别是与IntersectionObserver API相关的功能。IntersectionObserver是实现延迟加载图像的关键API之一，但在iOS 11的Safari中可能存在兼容性问题。

解决方案

1. 使用Polyfill

可以使用IntersectionObserver的Polyfill来解决兼容性问题。Polyfill是一种JavaScript代码，用于在不支持某些现代API的浏览器中模拟这些API的功能。

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

2. 使用传统的滚动事件监听

如果不想使用Polyfill，可以使用传统的滚动事件监听来实现延迟加载图像。

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);

3. 使用第三方库

还可以使用一些成熟的第三方库来实现延迟加载图像，例如lazysizes。

<!-- 引入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" />