有的时候，用户打开网站的时候就看到一直在转圈，网页中的CSS，JS都没有加载出来

这个时候我们可以加一个加载动画，我们可以这样。在header.php中添加

<style>
    .loading-container {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(5px);
        justify-content: center;
        align-items: center;
        flex-direction: column; 
        z-index: 9999;
    }
  
    .loading-image img {
        width: 220px;
        height: auto; 
        animation: bounce 0.5s infinite alternate;
    }
    .loading-text {
        text-align: center;
        font-size: 20px;
        margin-top: 5px;
    }
    @keyframes bounce {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-20px);
        }
    }
    @media (max-width: 768px) {
        .loading-container {
            align-items: center; 
        }
        .loading-text {
            margin-top: 0;
        }
    }
</style>
<div class="loading-container" id="loading-container">
    <div class="loading-image">
        <img src="（可以换成你自己的图片.jpg）?nocache=<?php echo time(); ?>" alt="Loading Image">
    </div>
    <p class="loading-text">第一次加载可能有点慢喔~</p>
</div>
<script>
    window.onload = function() {
        setTimeout(function() {
            var loadingContainer = document.getElementById("loading-container");
            loadingContainer.style.display = "none";
        },1000); // 1000 毫秒 =  1秒
    };
</script>

加上这个，效果如图：