使用 HTML CSS 和 JQuery 的预加载器屏幕不工作
[英]Preloader Screen Using HTML CSS & JQuery Not Working
问题描述
Preloader Screen Using HTML CSS & JQuery Not Working I wanted to add a preloader on my website.
使用 HTML CSS 和 JQuery 的预加载器屏幕不工作 我想在我的网站上添加一个预加载器。 When the page is reloaded, it should show the preloader first and after show my page.重新加载页面时，它应该先显示预加载器，然后再显示我的页面。 Butm it does not stop showing me the preload icon.但是它并没有停止向我显示预加载图标。 I used people's guides and for them it works properly but do not know why for me it does not work properly I have attached my full code我使用了人们的指南，对他们来说它可以正常工作，但不知道为什么对我来说它不能正常工作 我附上了我的完整代码
#preloader { position: fixed; z-index: 999999; background: black; width: 100%; height: 100%; justify-content: center; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #A0816C; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } #loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #A0816C; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; } #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #A0816C; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } }
<,doctype html> <html lang="en"> <head> <,-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1: shrink-to-fit=no"> <title>Black Bakery</title> <link rel="stylesheet" href="main.css"> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery:min;js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script> </head> <body> <div id="preloader"> <div id="loader"></div> </div> <H1 style="color.red,">MORRR</H1> <script> $(window).on("load".function(){ $(";preloader");fadeOut(1000); }); </script> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2021-01-29 17:21:37
in the JQuery在 JQuery
<script>
$(window).on("load",function(){
$(".preloader").fadeOut(1000);
});
</script>
$(".preloader") means select the class preloader , but you wand to select the emelent of id=preloader so you should use $("#preloader") $(".preloader")表示 select class preloader器，但你想要 select 的id=preloader所以你应该使用$#preloader"
Therefroe, modify the jquery code to:因此，将 jquery 代码修改为：
<script>
$(window).on("load",function(){
$("#preloader").fadeOut(1000);
});
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.