Fancybox V5图片懒加载失效：页面加载时图片已全部获取

我找不到Fancybox轮播组件的图片懒加载相关文档，现在页面加载时所有图片都会被一次性获取，懒加载没生效，请问可能是什么原因？

HTML代码 #

<div
    id="image-slider"
    class="f-property-carousel f-carousel rounded-2xl block basis-[500px] h-[500px] grow-[9999] max-h-[12rem] lg:max-h-[30rem]"
>
    <div class="f-carousel__viewport cursor-pointer rounded-2xl">
        <div class="f-carousel__track rounded-2xl">
            {% for img_url in property_view.image_urls %}
                <a href="{{ img_url }}" data-fancybox="group" class="f-carousel__slide rounded-2xl">
                    <img
                        {% if loop.index > 1 %}loading="lazy"{% endif %}
                        src="{{ img_url }}"
                        alt="{{ property_view.title }}"
                        class="lazy w-full h-full max-w-[80%] mx-auto object-cover drop-shadow-xl rounded-2xl"
                    >
                    </a>
                {% endfor %}
            </div>
        </div>
    </div>

配置与初始化代码 #

// Initialize slider
const options = {
    infinite: true,
    slidesPerPage: 1,
    transition: "slide",
    Dots: {dynamicFrom: 3},
    Panzoom: {touch: false},
    Navigation: {prevTpl: "", nextTpl: "", classes: {button: "f-button fade-in",}},
};

document.querySelectorAll(".f-carousel").forEach((container) => {
    new window.Carousel(container, options);
});

可能的原因及解决思路 #

• 原生loading="lazy"的判断逻辑限制：你给非首图加了loading="lazy"，但浏览器会根据元素是否在视口或视口附近决定是否加载。如果轮播的所有slide都处于同一个DOM流中（比如横向排列但未被隐藏/移出视口），浏览器可能判定它们都需要立即加载，无视loading="lazy"属性。
• 轮播组件的预加载行为：你使用的window.Carousel（Fancybox关联的轮播组件）可能默认开启了预加载相邻slide图片的功能，目的是让切换更流畅，这会直接覆盖原生懒加载。可以检查组件配置，看是否有preload这类参数，尝试将其设置为0或关闭该功能。
• src属性直接赋值触发提前加载：只要img标签设置了src，浏览器就会优先发起请求，哪怕有loading="lazy"。可以改用data-src存储图片地址，然后监听轮播的滑动事件，当slide进入视口时，再把data-src赋值给src，手动触发加载。
• CSS布局未正确隐藏非当前slide：如果非当前slide没有通过display: none、transform或定位属性移出视口，浏览器会认为这些图片属于当前页面的可见内容，直接全部加载。检查轮播的CSS样式，确保未展示的slide被放置在视口之外。

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