如何为我的网站制作一个javascript加载屏幕，一旦我的网站加载，该屏幕就会消失

Question

所以我一直想知道如何为我的网站制作一个正常的javascript加载屏幕，以下是代码。

 @import url(http://fonts.googleapis.com/css?family=Lato:300,700); @import url(http://fonts.googleapis.com/css?family=Italianno); @import url(http://fonts.googleapis.com/css?family=Indie+Flower); @import url(http://fonts.googleapis.com/css?family=Poiret+One); body { background-image: url(images/rocket.jpg); background-repeat: no-repeat; background-attachment: fixed; } #menu { height: 60px; text-decloration: none; line-height: 60px; width: 100%; background: ; position: relative; margin: 0px; font-family: Lato; } #image { background-repeat: no-repeat; background-position: left top; width: 100%; height: 740px; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } #specialbox { width: 300px; overflow: hidden; height: 300px; background-color: white; margin-right: 45px; margin-left: 47px; color: purple; clear: both; text-align: center; display: inline-block; padding: 3em; -webkit-box-shadow: 11px 11px 9px 0px rgba(36, 36, 36, 1); -moz-box-shadow: 11px 11px 9px 0px rgba(36, 36, 36, 1); box-shadow: 11px 11px 9px 0px rgba(36, 36, 36, 1); } #box { margin-top: 50px; width: 1100px; margin-bottom: 30px; background-color: white; margin-left: auto; margin-right: auto; color: purple; clear: both; text-align: center; padding: 5px; -webkit-box-shadow: 11px 11px 9px 0px rgba(36, 36, 36, 1); -moz-box-shadow: 11px 11px 9px 0px rgba(36, 36, 36, 1); box-shadow: 11px 11px 9px 0px rgba(36, 36, 36, 1); -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } #textbox { width: 1100px; background-color: white; margin-left: auto; margin-right: auto; color: purple; clear: both; text-align: center; padding: 5px; -webkit-box-shadow: 11px 11px 9px 0px rgba(36, 36, 36, 1); -moz-box-shadow: 11px 11px 9px 0px rgba(36, 36, 36, 1); box-shadow: 11px 11px 9px 0px rgba(36, 36, 36, 1); transition: All 1s ease; -webkit-transition: All 1s ease; -moz-transition: All 1s ease; -o-transition: All 1s ease; transform: rotate(0deg) scale(1.5) skew(deg) translate(0px); -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); -o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); -ms-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); } #textbox:hover { transform: rotate(0deg) scale(0) skew(1deg) translate(0px); -webkit-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px); -moz-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px); -o-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px); -ms-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px); } #footer { background-color: green; margin-left: auto; margin-right: auto; width: %; height: 10px; color: white; background-color: #303030; clear: both; text-align: center; padding: 5px; } /* Mini pictures in a circle */ .icon { position: relative; } .icon:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-style: normal; } .icon.major { background-color: rgba(66, 138, 134, 0.7); border-radius: 100%; color: #ffffff; cursor: default; display: block; height: 4.5em; line-height: 4.5em; margin-left: auto; margin-right: auto; margin-bottom: 25px; text-align: center; width: 4.5em; } .icon.major:before { font-size: 32px; } /* Commands */ .alignleft { float: left; } .alignright { float: right; } .centered { position: absolute; top: 0%; left: 1%; } .undercentered { position: absolute; top: 95%; left: 85%; } .undercentered2 { position: absolute; top: 95%; left: 1%; } .button { font-size: 16px; color: rgba(0, 220, 0, 0.6); font-family: 'Indie Flower', cursive; font-weight: normal; padding: 0px 15px; text-decoration: none; background-color: rgba(0, 0, 0, 0); display: inline-block; float: right; } .button:hover { background-color: rgba(200, 0, 0, 0.5); } .button:active { position: relative; top: 1px; } .cbutton { font-size: 16px; font-family: 'Indie Flower', cursive; font-weight: normal; padding: 0px 15px; text-decoration: none; background-color: rgba(200, 0, 0, 0.2); color: rgba(220, 0, 0, 0.6); display: inline-block; float: right; } .button:active { position: relative; top: 1px; } .myButton { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border: 1px solid rgba(66, 138, 134, 1); display: inline-block; cursor: pointer; color: red; font-family: arial; font-size: 15px; font-weight: bold; padding: 8px 30px; text-decoration: none; } .myButton:hover { background-color: rgba(66, 138, 134, 0.7); } .myButton:active { position: relative; top: 1px; } .myButton1 { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border: 1px solid rgba(66, 138, 134, 1); display: inline-block; cursor: pointer; color: red; font-family: arial; font-size: 13px; font-weight: bold; padding: 4px 26px; text-decoration: none; } .myButton1:hover { background-color: rgba(66, 138, 134, 0.7); } .myButton1:active { position: relative; top: 1px; } .line { height: 1px; width: 300px; margin-left: 200px; background: rgba(226, 44, 44, 0.9); border: 1px solid rgba(226, 44, 44, 0.9); } /* Types of text */ body { font-size: 0.8em; font-family: sans-serif, Comic Sans MS; border: 1px; margin: 0px; } p { color: green; text-align: left; } h1l { color: rgba(226, 44, 44, 0.9); font-size: 400%; font-family: 'Italianno', cursive; } h1 { color: green; font-size: 300%; font-family: 'Poiret One', cursive; text-align: center; } air { color: red; text-align: center; font-family: Sans-serif; font-size: 14px; } s-air { color: green; text-align: center; font-family: Comic Sans MS; font-size: 17px; } sair { color: green; font-family: Arial; font-size: 17px; margin-left: 54px; } copyright { color: white; font-family: Sans-Serif; font-size: 15px; } warning { color: orange; text-align: center; font-size: 150%; } airh { color: green; font-family: Impact; text-align: center; font-size: 200%; text-shadow: 4px 4px 0px rgba(150, 150, 150, 1); } nav { line-height: 30px; background-color: #eeeeee; height: 300px; width: 100px; float: left; padding: 5px; } section { width: 350px; float: left; padding: 10px; } test { color: white; font-family: Lato; margin-left: 10px; font-size: 17px; } h2l { color: rgba(0, 220, 0, 0.6); font-family: 'Indie Flower', cursive; font-size: 150%; text-align: center; } h2 { font-family: 'Indie Flower', cursive; color: red; } h3 { font-family: 'Indie Flower', cursive; font-size: 130%; text-align: center; } unidentified { color: green; font-family: impact; } big { color: green; font-family: Sans-serif; font-size: 200%; text-align: center; } sub { font-size: 0.8em; position: relative; top: 0.2em; } sup { font-size: 0.8em; position: relative; top: -0.2em; } code { background: #f0f0f0; font-family: monospace; font-size: 0.9em; margin: 0 0.25em; padding: 0.25em 0.65em; } input[type=password] { border-radius: 5px; border: 1px; height: 17px; border-color: green; } input[type=submit] { border-radius: 5px; background-color: white; border: 1px green; height: 19px; } 

 <!doctype html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Blazin' - Home</title> <link rel="Shortcut Icon" href="icon.ico" /> <link href="css/bootstrap.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="css/bootstrap-responsive.css" rel="stylesheet" /> <link href="css/font-awesome.css" rel="stylesheet" /> <link rel="stylesheet" media="screen and (min-width: 700px) and (max-width: 1000px)" href="mobile.css" /> <link rel="stylesheet" media="screen and (min-width: 1500px) and (max-width: 10000px)" href="fstyle.css" /> <!-- Header --> <div id="menu"> <a class="button alignright" href="staffarea.php">&nbsp;Admin</a> <a class="button alignright" href="logs.html">&nbsp;Logs</a> <a class="button alignright" href="rules.html">&nbsp;Rules</a> <!--Fixed pos START--> <a class="cbutton alignright">&nbsp;Home</a> <!--Fixed pos END--> <test class="alignleft" /> </div> <div id="image"> <h1l class="centered">Blazin Gaming</h1l> <h2l class="undercentered2">Version 3.3.2</h2l> </div> <!-- Main Content --> <!-- footer --> </body> </html> 

我确实需要帮助，我尝试了一些不同的方法，但是似乎没有任何效果。

Answer 1

您想要做的就是查看页面准备就绪的时间。 https://api.jquery.com/ready/

尽管正在执行jQuery动画，但是除非页面很大，否则您将没有太多时间。