为什么我的预加载器不会在网站加载后消失？

Question

我一直在观看有关如何实施预加载器的多个视频，并尝试按照它们进行操作，但从未以在网站加载后消失的预加载器告终。

这是我尝试过的方法之一：

* {
  padding: 0;
  margin: 0;
}

#loading {
  background:#020d1d url('images/preloader.gif') no-repeat center;
  background-size: 10%;
  height: 100vh;
  width: 100%;
  position: fixed;
  z-index: 100;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style.css">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Testing preloader</title>
</head> 

<body onload="myFunction()">
  
  <div id="loading"></div>

  <div class="randomImg">
    <img src="https://source.unsplash.com/2000x2000" alt="RandomImage">
  </div>

  <script>
    var preloader = document.getElementsById('loading');
    function myFunction() {
      preloader.style.display = 'none';
    }
  </script>

</body>

Answer 1

是getElementById不是getElementsById（不是s）

Answer 2

如果你更好地查看函数 MyFunction()，你会发现你在第 var preloader = document.getElementsById('loading'); 行犯了错误，特别是 getElementsById 部分，你需要将其替换为 getElementById.

为什么我的预加载器不会在网站加载后消失？

Why does my preloader not disappear once the website is loaded?

html

css

preloader