如何让加载屏消失？HTML/CSS/JS技术问题求助

Hey there! Let's figure out why your loader isn't disappearing. I see you're just starting out with HTML/CSS/JS—no worries, this is a super common beginner issue!

核心问题：DOM加载顺序导致的null错误 #

Your JavaScript code is placed in the <head> section, which runs before the rest of the page (including your #gif-wraper div) finishes loading. When you run var loader = document.getElementById("gif-wraper"); at that point, the element doesn't exist yet, so loader ends up being null. Later, when window.onload tries to set loader.style.display = 'none', it throws an error because you can't access properties of null.

修复方案（两种可选） #

方案1：把JS代码移到<body>末尾

This ensures all DOM elements are loaded before your JavaScript runs:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="content">
        <img src="https://picsum.photos/300/?random" />
    </div>
    <div id="gif-wraper">
        <div id='gif'></div>
        <div id="text">MK</div>
    </div>

    <!-- Move your script here -->
    <script>
        var loader = document.getElementById("gif-wraper");
        window.onload = function() {
            loader.style.display = 'none';
        }
        var x = 0;
        function changeColor() {
            var txtclr = document.getElementById("text");
            var clr = ["black", "white"];
            txtclr.style.color = clr[x];
            x = (x + 1) % clr.length;
        }
        setInterval(changeColor, 300);
    </script>
</body>
</html>

方案2：保留JS在<head>，但把元素选择器移到window.onload内部

This way, you only try to grab the element after the page is fully loaded:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script>
        window.onload = function() {
            var loader = document.getElementById("gif-wraper");
            loader.style.display = 'none';
        }
        var x = 0;
        function changeColor() {
            var txtclr = document.getElementById("text");
            var clr = ["black", "white"];
            txtclr.style.color = clr[x];
            x = (x + 1) % clr.length;
        }
        setInterval(changeColor, 300);
    </script>
</head>
<body>
    <div class="content">
        <img src="https://picsum.photos/300/?random" />
    </div>
    <div id="gif-wraper">
        <div id='gif'></div>
        <div id="text">MK</div>
    </div>
</body>
</html>

额外小优化：让消失效果更平滑 #

Since you already added a transition to your #gif element, you can make the loader fade out nicely instead of just popping away:

First, add the transition to your #gif-wraper in CSS:

#gif-wraper { 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
    background-color: black; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    transition: opacity 0.3s linear; /* Add this line */
}

Then update your JavaScript to trigger the fade:

window.onload = function() {
    var loader = document.getElementById("gif-wraper");
    // Fade out the loader
    loader.style.opacity = '0';
    // Wait for the transition to finish before hiding it completely
    setTimeout(() => {
        loader.style.display = 'none';
    }, 300);
}

That should fix your loader issue! Keep experimenting—you're doing great for a beginner 😊

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