Swiper JS 循环轮播模式下复制/克隆slide的原生懒加载功能失效问题

问题根因 #

• Swiper 开启loop: true时，会在初始化后自动在原始Slide前后克隆生成对应的DOM节点实现无缝轮播效果，提前初始化的第三方LazyLoad实例只会监听初始化时已存在的节点，克隆生成的新节点不会被自动纳入监听范围
• 代码中同时开启了Swiper原生懒加载配置lazy: true和第三方LazyLoad库，两者懒加载逻辑冲突
• 仅在Swiper初始化后执行一次lazyLoadImages.update()，后续轮播切换到克隆Slide时不会重新触发懒加载检测

修复方案 #

方案1：仅使用Swiper原生懒加载（推荐） #

无需引入第三方懒加载库，完全使用Swiper自带的懒加载能力，原生支持loop模式下克隆Slide的懒加载识别：

1. 删除所有自行初始化第三方LazyLoad的相关代码
2. 调整Slide内图片结构，将图片真实地址放在data-src属性，给img标签添加swiper-lazy类，可按需添加占位容器
3. 保留Swiper配置中的lazy: true即可

修复后Swiper配置示例：

const swiper3 = new Swiper('.swiper-container', {
    loop: true,
    slidesPerView: 1, // 原代码存在拼写错误：slidePerView应为slidesPerView
    lazy: true,
    pagination: {
        el: '.swiper-pagination',
        clickable: true
    },
    navigation: {
        nextEl: '.swiper-button-next-unique',
        prevEl: '.swiper-button-prev-unique',
    },
    preloadImages: false // 开启懒加载时建议关闭全局图片预加载
});

方案2：保留第三方LazyLoad库 #

如果必须使用自定义的第三方懒加载库，按如下规则调整：

1. 删除Swiper配置中的lazy: true，避免逻辑冲突
2. 监听Swiper的初始化和轮播切换事件，每次事件触发时调用LazyLoad的update方法，更新监听的节点列表

修复后完整代码示例：

var lazyLoadImages = new LazyLoad({
    elements_selector: ".lazy",
});

const swiper3 = new Swiper('.swiper-container', {
    loop: true,
    slidesPerView: 1,
    pagination: {
        el: '.swiper-pagination',
        clickable: true
    },
    navigation: {
        nextEl: '.swiper-button-next-unique',
        prevEl: '.swiper-button-prev-unique',
    },
    preloadImages: true,
    on: {
        init: function () {
            lazyLoadImages.update();
        },
        slideChange: function () {
            lazyLoadImages.update();
        }
    }
});

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