swiper开启循环模式下，由于图片大小不一致导致渲染顺序于期望顺序不一致

最新推荐文章于 2025-01-27 09:50:20 发布

原创最新推荐文章于 2025-01-27 09:50:20 发布 · 300 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

解决方案，图片预加载：

const images = ['image1.jpg', 'image2.jpg', 'image3.jpg']; // 图片URL数组  
const preloadImages = (urls, callback) => {  
  let loaded = 0;  
  urls.forEach(url => {  
    const img = new Image();  
    img.src = url;  
    img.onload = () => {  
      loaded++;  
      if (loaded === urls.length) {  
        callback();  
      }  
    };  
  });  
};  
  
preloadImages(images, () => {  
  // 所有图片加载完成后初始化 Swiper  
  new Swiper('.swiper-container', {  
    // Swiper 配置选项  
  });  
});

预加载图片过多或过大时，可能会延迟首页的白屏时间，建议配合占位图或loading使用