WOW jQuery Slider首次本地加载无动画，刷新正常的问题求助

问题根源 #

首次从桌面打开页面时，document.ready触发早于window.load，WOW初始化时预加载器还没隐藏，横幅文字处于不可见状态，WOW会判定元素不在视口内，因此不触发动画；刷新时页面资源已缓存，window.load触发更快，元素能被正确检测到，所以动画正常。

解决思路 #

• 把WOW初始化移到预加载器隐藏后
  删掉原来document.ready里的WOW初始化代码，将初始化逻辑放到预加载器隐藏的回调中，确保元素可见后再让WOW开始检测：

  // Page loading animation
  window.addEventListener("load", () => {
    setTimeout(() => {
      const preloader = document.getElementById("preloader");
      preloader.classList.add("hide");
      // 预加载器隐藏后初始化WOW
      new WOW().init();
    }, 0);
  });
  

• 强制WOW重新扫描元素
  如果想保留原有的WOW初始化时机，可先保存WOW实例，在预加载器隐藏后调用sync方法让它重新检测页面元素：
  先修改WOW初始化代码：

  let wowInstance;
  jQuery(document).ready(function() {
    wowInstance = new WOW().init();
  });
  

  再修改预加载器代码：

  window.addEventListener("load", () => {
    setTimeout(() => {
      document.getElementById("preloader").classList.add("hide");
      // 触发WOW重新检测动画元素
      wowInstance?.sync();
    }, 0);
  });
  

• 检查预加载器CSS
  确保预加载器隐藏时，横幅元素能真正进入视口。比如预加载器设置display: none或opacity: 0; visibility: hidden; pointer-events: none，避免预加载器隐藏后仍影响元素的位置计算。

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