页面完全加载后Loader仍显示不隐藏，该如何排查解决？

• 兜底定时器逻辑位置错误
  你当前将5秒延迟隐藏的setTimeout写在了window.load事件的回调函数内部，只有当window.load事件正常触发时，该定时器才会被注册执行。如果页面存在静态资源（图片、字体、第三方嵌入脚本、统计脚本等）加载超时/失败的情况，window.load事件会一直等待资源加载完成，此时不仅初始的hide()逻辑不会执行，兜底定时器也根本不会被初始化，导致Loader持续显示。
• 依赖执行错误
  如果jQuery资源加载失败，或者当前脚本执行时机早于jQuery加载完成，会导致$未定义报错，后续隐藏逻辑直接中断执行。
• 样式优先级冲突
  如果Loader元素的CSS规则中设置了带!important的display:block属性，jQuery的hide()方法默认添加的行内display:none优先级不足，无法覆盖原有样式，会出现逻辑执行但元素仍显示的问题。
• 其他脚本异常阻塞
  页面其他前置JS代码运行报错，会阻塞后续window.load回调的执行，导致隐藏逻辑不触发。

首先调整JS逻辑，将兜底定时器移到window.load事件外部，同时补充DOMContentLoaded事件作为更早的隐藏触发时机，新增异常兼容逻辑，修复后代码如下：

<div id="loader" class="loader-content">
    <div class="column">
        <div class="loader-container  animation-4">
            <div class="shape shape1"></div>
            <div class="shape shape2"></div>
            <div class="shape shape3"></div>
            <div class="shape shape4"></div>
        </div>
    </div>
</div>

<script>
// 兜底逻辑：无论页面加载状态如何，5秒后强制隐藏Loader
setTimeout(function () {
    const loader = document.getElementById('loader');
    if(loader) loader.style.display = 'none !important';
}, 5000);

// DOM解析完成就触发隐藏，不用等待全部资源加载，提升用户体验
document.addEventListener('DOMContentLoaded', function() {
    const loader = document.getElementById('loader');
    if(loader) loader.style.display = 'none';
});

// 兼容jQuery异常场景，保留全资源加载完成后的隐藏逻辑
if(window.jQuery) {
    $(window).on('load', function () {
        $("#loader").css('display','none !important');
    });
} else {
    window.addEventListener('load', function() {
        const loader = document.getElementById('loader');
        if(loader) loader.style.display = 'none';
    })
}
</script>

额外优化建议：

• 排查页面所有第三方资源的加载状态，移除不必要的第三方依赖，对非关键资源设置异步加载属性async/defer，避免阻塞window.load事件触发。
• 检查Loader元素的CSS规则，移除不必要的!important声明，避免样式优先级冲突。

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