jQuery window load事件触发后加载动画结束无法显示主站内容问题

问题原因 #

• $(window).load() 方法已在jQuery 3.0及以上版本废弃，该事件无法正常触发，导致隐藏加载层的逻辑完全没有执行
• 若页面存在资源加载失败（如图片、字体资源404），会阻塞window.load事件触发，加载层永远不会隐藏
• 加载层使用position: absolute定位，若页面存在其他定位父元素，会导致加载层无法覆盖全屏，引发布局异常
• 未给body设置初始overflow: hidden，如果页面主内容本身被其他样式隐藏，也会导致加载层消失后看不到内容

修复代码 #

1. 修改CSS代码 #

/* 新增body初始样式，加载阶段禁止滚动 */
body {
    overflow: hidden;
}
.loading {
    background-color: #fcfdff;
    color: #000;
    /* 将absolute改为fixed，保证加载层始终覆盖全屏 */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.spinner {
    position: fixed;
    top: 30%;
    left: 45%;
    transform: translate(-50%, -50%);
    background-color: transparent;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}

.img {
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;

}

@-webkit-keyframes sk-rotateplane {
    0% {
        -webkit-transform: perspective(0px)
    }

    50% {
        -webkit-transform: perspective(0px) rotateY(180deg)
    }

    100% {
        -webkit-transform: perspective(0px) rotateY(180deg) rotateX(180deg)
    }
}

@keyframes sk-rotateplane {
    0% {
        transform: perspective(0px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(0px) rotateX(0deg) rotateY(0deg)
    }

    50% {
        transform: perspective(0px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(0px) rotateX(-180.1deg) rotateY(0deg)
    }

    100% {
        transform: perspective(0px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(0px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

2. 修改jQuery逻辑代码 #

/*global $, window, document, jQuery */
// Loading Screen
$(function () {
    "use strict";
    // 加载层隐藏逻辑封装
    let hideLoading = function() {
        $(".loading .spinner").fadeOut(2000, function () {
            $(this).parent().fadeOut(2000, function () {
                // 恢复页面滚动
                $("body").css("overflow", "auto");
                $(this).remove();
            });
        });
    }
    // 页面所有资源加载完成后触发隐藏
    window.addEventListener('load', hideLoading);
    // 兜底逻辑：最多等待5秒，无论资源是否加载完成都隐藏加载层，可根据需求调整时长
    setTimeout(hideLoading, 5000);
});

3. 额外检查项 #

• 确认jQuery库引入位置在自定义JS代码之前，版本匹配无报错
• 确认页面主内容没有设置display: none、visibility: hidden等隐藏属性
• 打开浏览器控制台排查是否存在资源加载失败、JS语法报错问题

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