Javascript 在页面加载时，我应该在哪里放置预加载程序图像？_Javascript_Css

Javascript 在页面加载时，我应该在哪里放置预加载程序图像？

javascript css

Javascript 在页面加载时，我应该在哪里放置预加载程序图像？,javascript,css,Javascript,Css,我有预加载图像内的身体标签和导航标签内的头部，导航标签元素仍保留在页面上，而加载程序则显示为body 仅限加载。如何在不使用onload-in-body标记的情况下正确执行此操作 <html> <head> <style> body { background-image: url("https://img.freepik.com/free-vector/elegant-white-background-with-sh

我有预加载图像内的身体标签和导航标签内的头部，导航标签元素仍保留在页面上，而加载程序则显示为body 仅限加载。如何在不使用onload-in-body标记的情况下正确执行此操作

<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>


身体{
背景图像：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");
}

家
关于

此主体已预加载图像
函数加载器（）{
document.getElementById（“加载”）.style.display=“无”；
}

请阅读下面的内容-我已将导航移动到它所属的身体中

无需

onload

——只需立即在脚本标记中运行javascript行即可

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


身体{
背景图像：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");
}

家
关于

此主体已预加载图像
//只需立即执行此函数。。。
document.getElementById（“加载”）.style.display=“无”；

好吧，您可以使用jquery实现类似的功能

或者你可以跟着这个[


身体{
背景图像：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");
}
$（窗口）。加载（函数（）{
$（'加载'）.fadeOut（'缓慢'）；
});

家
关于

此主体已预加载图像
[1]: https://devdojo.com/tutorials/get-a-preloader-on-your-site-with-jquery

nav

标记未进入

头部

…它是

主体的一部分

…请参见此处的

头部的使用-头部和头部不同问题未标记jQuery
。另外.load（）快捷方式事件侦听器不推荐使用。请参阅文档
   <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