单次会话预加载器搭配AOS动画：元素属性修改脚本失效排查

核心问题分析 #

原JS代码存在3处错误导致逻辑失效：

• 获取预加载器元素后，用elmPreloader.length判断不存在是错误的（单个DOM元素无length属性）
• 原生DOM元素不能调用jQuery的.css()方法获取显示状态
• jQuery对象不能使用原生setAttribute方法修改属性

完整实现步骤 #

1. 预加载器单次会话控制逻辑 #

通过sessionStorage标记预加载器是否已显示，实现单次会话仅展示一次：

window.addEventListener('DOMContentLoaded', function() {
  const preloader = document.querySelector('.preloader-wrapper');
  if (sessionStorage.getItem('preloaderShown')) {
    // 已显示过，直接隐藏预加载器并取消动画延迟
    preloader.style.display = 'none';
    updateAosDelay(0);
    AOS.refresh();
  } else {
    // 首次加载，标记会话状态并设置隐藏定时器
    sessionStorage.setItem('preloaderShown', 'true');
    setTimeout(() => {
      preloader.style.display = 'none';
      updateAosDelay(0);
      AOS.refresh();
    }, 2000);
  }
});

2. 修正AOS延迟修改函数 #

统一使用原生DOM或jQuery语法修改属性，避免API混用：

function updateAosDelay(delay) {
  // 原生DOM写法（推荐）
  const targetElements = document.querySelectorAll('.layer, .intro, .social-wrapper');
  targetElements.forEach(el => el.setAttribute('data-aos-delay', delay));

  // 若使用jQuery，可替换为：
  // $('.layer, .intro, .social-wrapper').attr('data-aos-delay', delay);
}

3. AOS初始化配置 #

确保动画在预加载器状态变化后能正常触发：

AOS.init({
  duration: 1000,
  once: true // 保证动画仅触发一次
});

关键修正点说明 #

• 用sessionStorage实现会话级状态记录，关闭浏览器后标记自动清除
• 用document.querySelector获取预加载器，判断元素是否存在直接用!preloader即可
• 通过会话标记判断预加载器状态比读取CSS属性更高效，避免样式判断误差
• 修改属性时统一API类型，原生DOM用setAttribute，jQuery用.attr()

内容的提问来源于stack exchange，提问作者Katarina Perović