In diesem Artikel erfahren Sie, wie Sie eine Seitenladeanimation mit HTML5+JavaScript implementieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
(Ähnliche Tutorial-Empfehlung: HTML-Tutorial)
1 Verwenden Sie einen Timer und warten Sie jedes Mal.
2. Bestimmen Sie, ob die Ladeanimation beendet wurde, basierend darauf, ob das Laden der Seite abgeschlossen ist.
<script> document.onreadystatechange=function(){ console.log(document.readyState); if(document.readyState=="complete"){ $(".loading").fadeOut(); } } </script>
3. Um das Laden der Webseite zu beschleunigen, verwenden Sie CSS3, um Wiedergabeanimationen zu erstellen
4 Zeit entsprechend dem Ladefortschritt der Seite. Der Effekt von
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3进度条</title> <style> .loading{width:100%; height: 100%;position: fixed;top:0;left: 0;z-index: 100;background: #ffffff;} .loading .pic{ width: 64px; height: 64px; /* background: url(images/loading.gif); */ position: absolute; top: 0; bottom: 0; left:0; right:0; margin: auto} .loading .pic i{ display: block; float: left; width: 6px; height: 50px; background: #399; margin: 0 2px; transform: scaleY(0.4); animation: load 1.2s infinite; } .loading .pic i:nth-child(1){animation-delay:0.1s } .loading .pic i:nth-child(2){animation-delay:0.2s } .loading .pic i:nth-child(3){animation-delay:0.3s } .loading .pic i:nth-child(4){animation-delay: 0.4s} .loading .pic i:nth-child(5){animation-delay:0.5s } @keyframes load{ 0%,40%,100%{transform: scaleY(0.4)} 20%{transform:scaleY(1) } } </style> </head> <body> <div> <div> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div> <img src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg" alt=""/> <img src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg" alt=""/> <img src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg" alt=""/> <img src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg" alt=""/> </body> </html>
ist wie folgt. Da es zu schnell lädt, habe ich einen Screenshot der Animations-Startseite gemacht.
Der geschriebene Stilcode kann unter dieser URL http://autoprefixer.github.io/ gefunden werden, um uns bei der automatischen Anpassung an verschiedene Browser zu helfen.Weitere Programmierkenntnisse finden Sie unter:
ProgrammiervideoDas obige ist der detaillierte Inhalt vonH5 + JS implementiert eine Seitenladeanimation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!