JavaScript预加载元素淡入功能失效问题求助：如何实现与淡出一致的顺畅淡入效果

你的预加载器淡出正常但淡入没效果，核心原因是预加载元素默认直接显示在页面上，没有给它「从隐藏到显示」的过渡起点。下面是具体修复方案，让淡入和淡出一样顺畅：

步骤1：修改CSS，设置预加载器初始隐藏 #

首先要让预加载器在页面加载初期处于隐藏状态，这样jQuery的fadeIn才有作用基础。更新你的CSS代码：

/* Preloader CSS */ 
#preloader { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #ffffff; 
    z-index: 99999; 
    height: 100%;
    display: none; /* 新增：初始隐藏预加载器 */
} 
#status { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 64px; 
    height: 64px; 
    margin: -32px 0 0 -32px; 
    padding: 0; 
}

步骤2：更新JavaScript，添加淡入逻辑 #

原来的代码只处理了淡出，现在需要在DOM加载完成后先触发预加载器的淡入，再等页面资源全部加载完执行淡出。另外注意：jQuery 3.0及以上版本已废弃$(window).load()，建议改用兼容性更好的$(window).on('load', function(){})：

/* Preloader Javascript */ 
// DOM结构加载完成后，立即淡入预加载器
$(document).ready(function(){
    $("#preloader").fadeIn("slow"); // 和淡出速度保持一致，效果更统一
});

// 页面所有资源（图片、样式等）加载完成后，执行淡出逻辑
$(window).on('load', function(){
    $("#status").fadeOut("slow");
    $("#preloader").delay(1000).fadeOut(1000);
});

为什么这样能生效？ #

• 初始设置display: none让预加载器一开始不可见，给fadeIn提供了「从无到有」的过渡起点；
• $(document).ready()会在DOM结构加载完成后立即触发，预加载器会慢慢淡入，替代原来的直接出现；
• 保留原有淡出逻辑，确保页面加载完成后预加载器顺畅消失。

可选优化：用CSS过渡替代jQuery动画（原生效果更优） #

如果你不想依赖jQuery动画，也可以用CSS的opacity和transition实现更原生的淡入淡出：

修改后的CSS： #

#preloader { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #ffffff; 
    z-index: 99999; 
    height: 100%;
    opacity: 0; /* 初始透明 */
    visibility: hidden; /* 初始不可见，避免干扰页面点击 */
    transition: opacity 1s ease, visibility 1s ease; /* 过渡动画 */
}
#preloader.active {
    opacity: 1;
    visibility: visible;
}
#status {
    /* 原有样式保持不变 */
}

对应的JavaScript： #

$(document).ready(function(){
    $("#preloader").addClass("active"); // 添加类触发淡入
});

$(window).on('load', function(){
    $("#status").fadeOut("slow");
    setTimeout(function(){
        $("#preloader").removeClass("active"); // 移除类触发淡出
    }, 1000);
});

这样也能实现和jQuery动画一样顺畅的淡入效果，而且性能更优哦～

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