gpt4 book ai didi

javascript - 我应该在页面加载时将预加载器图像放在哪里?

转载 作者:行者123 更新时间:2023-11-28 19:17:38 24 4
gpt4 key购买 nike

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

最佳答案

请看什么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>

关于javascript - 我应该在页面加载时将预加载器图像放在哪里?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57945037/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com