jQuery实现的登录页加载屏在表单提交刷新时重复出现怎么解决？

问题原因 #

表单提交触发的是页面全量刷新，和首次打开页面的加载行为完全一致，会重新触发window.load事件，因此默认会再次执行加载屏的显示逻辑。

可行解决方案 #

方案1：使用sessionStorage标记提交状态（推荐，兼容性好改造成本低） #

利用sessionStorage仅在当前标签页会话生效、刷新不丢失的特性，标记表单提交行为，页面加载时判断标记跳过加载动画：

1. 先在表单提交逻辑中添加标记：

$('form').on('submit', function() {
  sessionStorage.setItem('isFormSubmitted', 'true')
})

2. 修改原有加载屏逻辑，增加标记判断：

$(window).on("load",function(){
  // 校验是否为表单提交触发的刷新
  const isFormSubmit = sessionStorage.getItem('isFormSubmitted')
  if(isFormSubmit) {
    // 直接显示主内容，跳过加载动画
    $(".loading").hide()
    $(".container").show().css("display", "flex")
    // 清除标记，避免后续正常打开页面不显示加载屏
    sessionStorage.removeItem('isFormSubmitted')
    return
  }
  // 原有首次加载的动画逻辑
  setTimeout(function() { 
    $(".loading").fadeOut("slow", function(){
        $(".container").fadeIn("slow").css("display", "flex");
    });     
  }, 500);
});

方案2：改为AJAX异步提交表单（体验最优） #

阻止表单默认提交的刷新行为，用异步请求提交登录数据，完全避免页面全量刷新：

$('form').on('submit', function(e) {
  // 阻止默认页面刷新
  e.preventDefault()
  // 可按需添加按钮级提交加载提示，无需触发全屏加载屏
  const loginData = $(this).serialize()
  $.post('你的登录接口地址', loginData, function(res) {
    if(res.success) {
      // 登录成功后跳转内部页面
      location.href = '/dashboard'
    } else {
      // 登录失败直接在当前页提示错误
      alert(res.msg)
    }
  })
})

方案3：通过加载性能API判断刷新行为（仅参考） #

可以通过Performance API判断页面是否为刷新加载，不需要修改表单提交逻辑，但是无法区分是用户主动刷新还是表单提交触发的刷新，适合不需要精确区分场景的情况。

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