HTML Loader在部分移动设备卡顿，求修改代码解决兼容问题

嗨，我来帮你排查下为什么这个加载器在部分移动设备上卡住了，咱们一步步拆解问题并修复：

1. 最致命的错误：选择器写错了！ #

你jQuery代码里写的是 $("se-pre-con")，但你的加载器元素是<div class="se-pre-con"></div>——类选择器必须加.前缀啊！没有点号的话，jQuery会去找<se-pre-con>这个自定义标签，根本找不到目标元素，自然不会执行fadeOut，加载器就一直停在屏幕上了。正确写法应该是 $(".se-pre-con")。

2. 过时的jQuery版本拖后腿 #

你用的jQuery 1.5.2是2011年的老版本，很多现代移动浏览器（比如新版的iOS Safari、Android Chrome）对它的兼容性极差，事件触发、DOM操作都可能出问题。建议直接升级到稳定的3.x版本，加载器这部分逻辑完全不需要依赖旧版本的特性。

3. 已被弃用的$(window).load()方法 #

$(window).load() 在jQuery 3.0之后就被移除了，就算在旧版本里，它的触发条件是所有资源（图片、脚本、样式表）完全加载完成——如果某个资源加载失败（比如你的Preloader.gif在某些网络差的设备上超时），这个事件就永远不会触发，加载器就卡死了。

更可靠的方案：

• 如果只需要等DOM结构就绪，用$(document).ready()或者原生的DOMContentLoaded事件
• 如果确实要等所有资源加载完，用原生的window.addEventListener('load', function() { ... })，兼容性更好

4. Modernizr的CSS规则没对应上 #

你的CSS里写的是.js #loader和.no-js #loader，但加载器元素是.se-pre-con，不是#loader，这部分规则根本不会生效，Modernizr的检测也就白做了。得把CSS里的#loader改成.se-pre-con。

修改后的完整代码示例 #

HTML部分 #

my contents
<div class="se-pre-con"></div>

<!-- 升级到最新稳定版jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- 升级Modernizr到较新版本（可选，用于检测JS是否启用） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/3.12.0/modernizr.min.js"></script>

CSS部分 #

/* 修正Modernizr对应的选择器 */
.no-js .se-pre-con { display: none; }
.js .se-pre-con { display: block; }

.se-pre-con {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url(img/Preloader.gif) center no-repeat #fff;
  /* 加个CSS过渡，替代jQuery动画，性能更好 */
  transition: opacity 0.6s ease;
}

/* 用于隐藏的类 */
.se-pre-con.hidden {
  opacity: 0;
  pointer-events: none; /* 防止加载器挡住页面点击 */
}

JavaScript部分 #

// 用原生load事件，兼容性覆盖所有设备
window.addEventListener('load', function() {
  // 找到加载器元素，添加hidden类触发过渡动画
  const loader = document.querySelector('.se-pre-con');
  loader.classList.add('hidden');
  // 动画结束后彻底移除元素（可选，优化页面性能）
  setTimeout(() => {
    loader.style.display = 'none';
  }, 600);
});

// 如果你还是想用jQuery，也可以这么写：
// $(document).ready(function() {
//   $(".se-pre-con").fadeOut("slow");
// });

额外优化建议 #

• 检查Preloader.gif的路径是否正确，尽量压缩图片大小，避免移动设备加载过慢
• 如果不需要Modernizr的检测（比如你的页面必须依赖JS），可以直接去掉Modernizr相关的CSS和脚本，简化代码

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