Swiper图片懒加载失效：浏览器预加载问题排查与解决

核心问题原因 #

你当前代码里直接给<img>设置了src属性，浏览器会在DOM加载时自动预加载该图片，这会绕过Swiper的懒加载逻辑。Swiper的懒加载机制依赖于将图片地址放在data-src（而非src），由Swiper在合适时机（比如slide进入视口）再将data-src赋值给src来触发加载。

修复步骤 #

• 替换图片的src为data-src：保留swiper-lazy类，这是Swiper识别懒加载元素的必要标识。
• 保留preloadImages={false}配置：这个配置会禁止Swiper主动预加载所有图片，是懒加载生效的关键。
• 关于loading="lazy"属性：可以保留，它是浏览器原生懒加载，和Swiper的懒加载逻辑可共存，但核心还是要依赖Swiper的配置来实现轮播场景下的精准懒加载。

修改后的代码示例 #

import { Pagination, Navigation, Autoplay, Keyboard, Lazy } from "swiper";
import { Swiper, SwiperSlide } from 'swiper/svelte';

import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/lazy";

let modules = [Pagination, Autoplay, Lazy];
// ... 其他逻辑
<Swiper
    on:swiper={(e) => swiper = e.detail[0]}
    loop={loop}
    lazy={{
        loadPrevNext: true,
    }}
    preloadImages={false}
    spaceBetween={0}
    slidesPerView={1}
    modules={modules}
>
    {#each image_urls as image_url}
        <SwiperSlide>
            <!-- 将src替换为data-src -->
            <img class="w-full object-cover cursor-pointer swiper-lazy" data-src={image_url} alt="house" loading="lazy">
            <div class="swiper-lazy-preloader"></div>
        </SwiperSlide>
    {/each}
</Swiper>

额外注意事项 #

• 如果开启了loop模式，Swiper会复制首尾的slide来实现循环效果，这可能会导致额外加载1-2张图片（对应复制的slide），属于正常现象。
• 确保Lazy模块已经正确加入到modules数组中，否则Swiper不会启用懒加载功能。

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