如何解决Uncaught ReferenceError: Swiper is not defined错误？

1. 解决「Swiper is not defined」错误 #

这个错误的核心是Swiper构造函数未被正确加载到全局环境，可通过以下步骤修复：

• 严格控制脚本加载顺序：必须确保Swiper的JS文件在你的main.js之前加载，否则main.js执行时Swiper还未初始化。正确的引入顺序应为：

  <!-- 先加载Swiper样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
  <!-- 再加载Swiper核心脚本 -->
  <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
  <!-- 最后加载你的业务脚本 -->
  <script src="main.js"></script>
  

• 修复CDN链接格式：检查链接中的引号是否为英文半角引号，避免因语法错误导致资源加载失败。
• 切换稳定版本：部分新版本Swiper可能调整了全局变量暴露逻辑，可切换到稳定的旧版本（如v8.4.7），确保全局Swiper变量正常：

  <script src="https://cdn.jsdelivr.net/npm/swiper@8.4.7/swiper-bundle.min.js"></script>
  

• 本地引入资源：如果CDN网络不稳定，直接下载Swiper的swiper-bundle.min.js和swiper-bundle.min.css到本地项目，改用本地路径引入，彻底避免网络加载问题。

2. 解决后台标签页资源加载限流问题 #

浏览器为节省资源，会对后台标签页的网络请求进行节流，导致CDN资源加载延迟。可通过以下方式适配：

• 延迟初始化Swiper：监听页面可见性，仅当页面切换到前台时才初始化Swiper，修改main.js代码如下：

  function initSwiper() {
    // 避免重复初始化
    if (document.querySelector(".projects__container .swiper")) return;
    
    var swiperProjects = new Swiper(".projects__container", {
      loop: true,
      spaceBetween: 24,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      pagination: {
        el: ".swiper-pagination",
      },
      breakpoints: {
        1200: {
          slidesPerView: 2,
          spaceBetween: -56,
        },
      },
    });
  }
  
  // 页面加载时若可见则立即初始化，否则监听可见事件
  if (document.visibilityState === "visible") {
    initSwiper();
  } else {
    document.addEventListener("visibilitychange", () => {
      if (document.visibilityState === "visible") {
        initSwiper();
      }
    });
  }
  

• 使用defer属性优化加载：给脚本添加defer属性，确保脚本在DOM加载完成后按顺序执行，避免阻塞页面同时保证加载顺序：

  <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js" defer></script>
  <script src="main.js" defer></script>
  

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