Swiper JS RTL模式下图片懒加载异常问题求助

问题描述 #

在RTL（从右到左）布局的文档中使用Swiper v11轮播，幻灯片包含设置了loading="lazy"的图片，Chrome浏览器中仅当幻灯片滚动到可见状态时才会加载图片；移除dir="rtl"或幻灯片数量减少到2-3张时，该问题消失。需要在RTL文档中使用超过20张幻灯片的轮播并解决此问题。

解决方案 #

推荐使用Swiper内置的懒加载功能替代原生loading="lazy"，因为Swiper的懒加载逻辑会适配RTL布局，不会出现浏览器原生懒加载的误判问题。具体步骤如下：

1. 修改图片标签

   • 移除图片的loading="lazy"属性
   • 将src替换为data-src（用于Swiper懒加载识别）
   • 给图片添加swiper-lazy类
   • 可选：添加swiper-lazy-preloader元素作为加载占位符

2. 开启Swiper懒加载配置

   • 在Swiper初始化参数中添加lazy: true
   • 配置preloadImages: false关闭原生图片预加载，交给Swiper处理
   • 可选设置lazy.preloadPrevNext: 2（预加载当前幻灯片前后各2张的图片，按需调整数量）

修改后的完整代码 #

<!DOCTYPE html>
<html lang="eng" dir="rtl">
<head>
    <title>test swiper</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <style>
        .swiper {
            width: 100%;
            height: 300px;
        }
        .item-swiper-slide {
            width: 250px;
        }

        .item-swiper-slide:nth-child(n) {
            width: 250px;
        }
    </style>
</head>
<body>
<main>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide item-swiper-slide">
                <img data-src="samlpe.jpg" width="250" height="300" alt="test" class="swiper-lazy"/>
                <div class="swiper-lazy-preloader"></div>
            </div>
            <div class="swiper-slide item-swiper-slide">
                <img data-src="samlpe.jpg" width="250" height="300" alt="test" class="swiper-lazy"/>
                <div class="swiper-lazy-preloader"></div>
            </div>
            <!-- 剩余幻灯片保持相同结构即可 -->
            <div class="swiper-slide item-swiper-slide">
                <img data-src="samlpe.jpg" width="250" height="300" alt="test" class="swiper-lazy"/>
                <div class="swiper-lazy-preloader"></div>
            </div>
        </div>

        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-scrollbar"></div>
    </div>
</main>
<script>
    const swiper = new Swiper('.swiper', {
        loop: true,
        preloadImages: false,
        lazy: {
            enabled: true,
            preloadPrevNext: 2,
        },
        pagination: {
            el: '.swiper-pagination',
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    });
</script>
</body>
</html>

补充说明 #

如果坚持要使用原生loading="lazy"，可以尝试临时修正swiper-wrapper的初始定位，但这种方法可能和loop模式冲突，稳定性不如内置懒加载：

.swiper-wrapper {
    transform: translateX(0) !important;
}

然后在Swiper初始化完成后移除该样式：

swiper.on('init', function() {
    document.querySelector('.swiper-wrapper').style.transform = '';
});

内容的提问来源于stack exchange，提问作者davidF