Blazor+Glide.js图片轮播加载初期出现拉伸问题，求解决方案

我在Blazor网站里用Glide.js实现图片轮播，轮播功能正常，但加载最初几毫秒会出现图片拉伸的情况。

正常效果：

异常效果：

我的Razor代码：

<div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
        @foreach (var picture in _carouselPictures)
       {
           <li class="glide__slide"><img class="carouselPicture" alt="Exemple de maquillage" src=@picture/></li>
       }
    </ul>
  </div>
  <div class="glide__arrows" data-glide-el="controls">
    <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
    <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
  </div>
</div>

我的JS代码：

window.InitGlidePictureCarousel = () => {
    const config = {
        type: 'carousel',
        autoplay: 2000,
        hoverpause: false,
        gap: 0,
        animationDuration: 3000,
        perView: 12,
        breakpoints: {
            3250: {
                perView: 11
            },
            3000: {
                perView: 10
            },
            2750: {
                perView: 9
            },
            2500: {
                perView: 8
            },
            2250: {
                perView: 7
            },
            2000: {
                perView: 6
            },
            1750: {
                perView: 5
            },
            1500: {
                perView: 4
            },
            1250: {
                perView: 3
            },
            1000: {
                perView: 2
            },
            500: {
                perView: 1
            }
        }
    };

    new Glide('.glide', config).mount();
}

解决方案 #

1. 给图片和容器设置固定比例约束 #

加载初期Glide还未完成初始化，图片没有被正确布局，通过CSS提前约束尺寸比例避免拉伸：

/* 固定比例容器，以4:3为例，可根据你的图片调整比例 */
.glide__slide {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 4:3比例 = 3/4*100% */
  overflow: hidden;
}

.carouselPicture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例裁剪超出部分，也可用object-contain完整显示 */
}

如果需要固定高度，也可以直接设置：

.glide__slide {
  height: 300px; /* 自定义轮播高度 */
  overflow: hidden;
}

.carouselPicture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

2. 等待所有图片加载完成后再初始化Glide #

修改JS代码，确保图片尺寸确定后再启动Glide，避免布局计算错误：

window.InitGlidePictureCarousel = () => {
    const carouselImages = document.querySelectorAll('.carouselPicture');
    let loadedCount = 0;

    // 遍历检查图片加载状态
    carouselImages.forEach(img => {
        if (img.complete) {
            loadedCount++;
        } else {
            img.addEventListener('load', incrementLoaded);
            img.addEventListener('error', incrementLoaded); // 处理加载失败的情况
        }
    });

    // 若所有图片已加载，直接初始化
    if (loadedCount === carouselImages.length) {
        initGlide();
    }

    function incrementLoaded() {
        loadedCount++;
        if (loadedCount === carouselImages.length) {
            initGlide();
        }
    }

    function initGlide() {
        const config = {
            type: 'carousel',
            autoplay: 2000,
            hoverpause: false,
            gap: 0,
            animationDuration: 3000,
            perView: 12,
            breakpoints: {
                3250: { perView: 11 },
                3000: { perView: 10 },
                2750: { perView: 9 },
                2500: { perView: 8 },
                2250: { perView: 7 },
                2000: { perView: 6 },
                1750: { perView: 5 },
                1500: { perView: 4 },
                1250: { perView: 3 },
                1000: { perView: 2 },
                500: { perView: 1 }
            }
        };
        new Glide('.glide', config).mount();
    }
}

3. 隐藏加载中的轮播容器 #

通过CSS在Glide初始化前隐藏容器，避免看到拉伸过渡，初始化完成后再显示：

.glide {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.glide.loaded {
  visibility: visible;
  opacity: 1;
}

然后在JS的initGlide函数末尾添加类：

function initGlide() {
    const glide = new Glide('.glide', config).mount();
    document.querySelector('.glide').classList.add('loaded');
}

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