Swiper.js开启图片懒加载后移动端初始化高度异常如何解决？

你遇到的高度跳变是因为开启懒加载后，Swiper初始化早于图片加载，autoHeight 参数在初始化计算高度时，拿到的是占位图原始尺寸（1200*460）对应的高度，等移动端自适应图片加载完成后才会重新计算高度，因此出现短暂的高度错误。

方案1：CSS 比例预占高度（最推荐，无性能损耗，无跳变） #

利用padding百分比按宽度计算的特性，提前给轮播项预设固定宽高比，不需要依赖JS计算高度，从根源避免跳变。
给你的轮播项加如下CSS规则：

.swiper-container-ban-wide .swiper-slide {
  position: relative;
  height: 0;
  /* 宽高比 = 图片高度/图片宽度 = 460/1200 ≈ 38.33% */
  padding-top: 38.33%;
  overflow: hidden;
}
.swiper-container-ban-wide .swiper-slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

配置完可以把Swiper初始化参数里的autoHeight: true删掉，不需要JS动态计算高度，稳定性更高。

方案2：监听懒加载事件手动更新高度 #

如果必须保留autoHeight配置，可以在Swiper初始化时添加懒加载完成事件监听，图片加载后立即触发高度更新：

const myswiperban = new Swiper('.swiper-container-ban-wide', {
  loop: true,
  pagination: {
    el: '.swiper-pagination-ban-wide',
    clickable: true
  },
  navigation: {
    nextEl: '.swiper-button-next-ban-wide',
    prevEl: '.swiper-button-prev-ban-wide',
  },
  slidesPerView:1,
  freeMode:true,
  autoplay: {
    delay: 3000
  },
  autoHeight:true,
  preloadImages: false,
  lazy: {
    loadPrevNext: true
  },
  // 新增事件监听
  on: {
    lazyImageReady: function() {
      this.updateAutoHeight();
    }
  }
});

方案3：首屏图片加载完成后再初始化Swiper #

优先加载首屏轮播图，加载完成后再初始化Swiper，避免初始化时拿不到正确尺寸：

// 取第一张轮播图
const firstImg = document.querySelector('.swiper-container-ban-wide .swiper-slide:first-child img');
firstImg.onload = function() {
  // 在这里初始化Swiper，代码和你原来的一致
  const myswiperban = new Swiper('.swiper-container-ban-wide', {
    // 原有配置不变
  });
}

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