我应该将预加载器图像放在页面加载的哪个位置？

Question

我在 body 标签内有预加载图像，而 nav 标签在 head 、 nav 标签内 元素保留在页面上，而加载器正在显示正文 仅加载。如何在body标签不使用onload的情况下正确完成

<html>
   <head>
    <style>
      body {
        background-image: url("https://img.freepik.com/free-vector/elegant-white-background-with-shiny-lines_1017-17580.jpg?size=626&ext=jpg"), url("https://www.publicdomainpictures.net/pictures/140000/nahled/grey-white-background.jpg");
      }
    </style>
    <nav>
      <ul>
        <li>Home</li>
        <li>About</li>
      </ul>
    </nav>
  </head>
  <body onload="loader()">
    <div id="loading">
        <img id="loading-image" src="http://people.ischool.berkeley.edu/~ellyrath/images/spinner-loop.gif" alt="Loading..." />
    </div>
    This body has pre-loaded image
    <script language="javascript" type="text/javascript">
      function loader () { 
        document.getElementById("loading").style.display = "none";
      }
    </script>   
  </body>   
</html>

Answer 1

请阅读 belongs in the head element 的内容 - 下面我已将导航移动到它所属的正文中。

不需要onload - 只需立即在脚本标记中运行 javascript 行。

或者，您可以将其保存在一个函数中，并立即在您的脚本中调用该函数。

<html>

<head>
  <style>
    body {
      background-image: url("https://img.freepik.com/free-vector/elegant-white-background-with-shiny-lines_1017-17580.jpg?size=626&ext=jpg"), url("https://www.publicdomainpictures.net/pictures/140000/nahled/grey-white-background.jpg");
    }
  </style>
</head>

<body>
  <div id="loading">
    <img id="loading-image" src="https://placeimg.com/640/480/any">
  </div>
  <header>
    <nav>
      <ul>
        <li>Home</li>
        <li>About</li>
      </ul>
    </nav>
  </header>
  This body has pre-loaded image
  <script language="javascript" type="text/javascript">
    // simply execute this function immediately...
    document.getElementById("loading").style.display = "none";
  </script>
</body>

</html>

Answer 2

你想要实现的目标可以使用 jquery 来做这样的事情

或者你可以关注这个 [https://devdojo.com/tutorials/get-a-preloader-on-your-site-with-jquery][1]

   <head>
    <style>
      body {
        background-image: url("https://img.freepik.com/free-vector/elegant-white-background-with-shiny-lines_1017-17580.jpg?size=626&ext=jpg"), url("https://www.publicdomainpictures.net/pictures/140000/nahled/grey-white-background.jpg");
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    $(window).load(function() {
   $('#loading').fadeOut('slow');
});
  </head>
  <body >
    <div id="loading">
        <img id="loading-image" src="http://people.ischool.berkeley.edu/~ellyrath/images/spinner-loop.gif" alt="Loading..." />
    </div>
    <nav>
      <ul>
        <li>Home</li>
        <li>About</li>
      </ul>
    </nav>
    This body has pre-loaded image

  </body>   

</html>


  [1]: https://devdojo.com/tutorials/get-a-preloader-on-your-site-with-jquery