如何在确认jQuery定义完成后运行内联脚本？

我完全懂你的困扰——首屏的Slick滑块因为jQuery加载顺序的限制，必须靠window.onload才能正常运行，但这会让首屏内容加载太慢，拖垮用户体验。既然没法调整脚本标签顺序或jQuery的引入位置，我们可以用轮询检测jQuery就绪状态的方法，一旦jQuery加载完成就立刻初始化滑块，不用等页面所有资源都加载完毕。

核心解决方案代码 #

直接用这段代码替换你现有的window.onload脚本即可：

// 封装滑块初始化逻辑，方便复用
function initSlickSlider() {
  $('.js-slick').slick({
    autoplay: true,
    autoplaySpeed: 5000,
    dots: true,
    fade: true,
    speed: 1000
  });
}

// 轮询检测jQuery是否已加载完成
function waitForJQuery() {
  // 检查全局变量$是否存在（即jQuery是否就绪）
  if (typeof $ !== 'undefined') {
    initSlickSlider();
  } else {
    // 每隔100毫秒检查一次，可根据实际情况调整间隔时长
    setTimeout(waitForJQuery, 100);
  }
}

// 启动检测流程
waitForJQuery();

为什么这个方法比window.onload更合适？ #

• window.onload会等待页面**所有资源（图片、样式、第三方脚本等）**加载完成才执行，而我们只需要等jQuery就绪就行，首屏滑块能提前很久初始化完成。
• 完全不需要修改任何脚本标签的顺序或jQuery的引入位置，完美适配你的限制条件。
• 既然页面其他滑块能正常运行，说明jQuery最终一定会加载完成，这个轮询逻辑必然会触发滑块初始化。

可选优化：添加超时限制 #

为了避免极端情况下的无限轮询，可以给检测逻辑加一个最大等待次数，比如最多等待5秒（可按需调整）：

let waitAttempts = 0;
const maxWaitAttempts = 50; // 50次×100ms = 5秒

function waitForJQuery() {
  if (typeof $ !== 'undefined') {
    initSlickSlider();
  } else if (waitAttempts < maxWaitAttempts) {
    waitAttempts++;
    setTimeout(waitForJQuery, 100);
  } else {
    console.warn('jQuery加载超时，无法初始化Slick滑块');
  }
}

waitForJQuery();

这样即使出现意外情况，也不会让代码一直循环下去，还能在控制台打印警告信息方便后续排查。

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