求助：页面加载后预加载器不消失且仅旋转两次的问题

你的代码存在几个关键问题，导致加载动画冻结、页面无法正常显示，以下是具体修正：

1. 加载动画冻结原因及修复 #

当前spin动画仅执行1次（默认animation-iteration-count: 1），旋转720度后就停止。要让它持续旋转直到预加载器消失，需修改img的动画属性：

• 加入infinite设置无限循环
• 把ease换成linear让旋转更匀速自然
• 简化spin动画为0到360度，无限循环即可实现持续旋转效果

2. JS代码的语法与逻辑错误 #

原JS代码有多处问题：

• 选择器$(preloader)未加引号，正确应为$('.preloader')
• fadeOut(slow)中的slow是字符串参数，需加引号：fadeOut('slow')
• 递归调用setTimeout(fade)会导致重复执行，逻辑混乱。正确做法是监听页面加载完成事件，加载完成后再隐藏预加载器

3. 全局样式破坏页面布局 #

*选择器中的height: fit-content会强制所有元素高度适配内容，导致页面主体内容无法正常显示，直接删除该属性即可

修正后的完整代码 #

HTML（无需修改）

<div class="preloader">
   <img src="./Images/loading.png">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.minjs"></script>
<script src="js/template.js"></script>
<script src="js/index.js"></script>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.preloader {
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 100000;
    background-color: #FFA800;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
}
.preloader img {
    animation: spin 1s linear infinite;
    width: 150px;
}
@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@keyframes fadeout {
    from {opacity: 1;}
    to {opacity: 0;}
}

JS

// 监听所有资源加载完成事件，确保页面内容全部加载后再隐藏预加载器
$(window).on('load', function() {
    $('.preloader').fadeOut('slow');
});

可选优化 #

如果希望DOM结构加载完成就隐藏预加载器（无需等待图片、视频等资源），可将$(window).on('load')替换为：

$(document).ready(function() {
    $('.preloader').fadeOut('slow');
});

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