Das JS -Fortschritts -Lade -Animationsprogramm ist meine persönliche Arbeit. Wenn es nicht gut geschrieben ist, können Sie sich darauf beziehen, aber ohne meine Erlaubnis verwenden Sie es bitte nicht für andere Zwecke!
Ich schrieb am Morgen eine Homepage -Fortschritts -Ladeanimation. Ich wollte es in meinem Blog verwenden. Ich stellte fest, dass der Blog Park zu schnell geladen wurde und den Animationseffekt überhaupt nicht sehen konnte. Ich habe gerade "komplett" geladen. Vergessen Sie es, machen Sie den Blog nicht zu aufgebläht!
Also habe ich eine Demo -Seite geschrieben und dem Körper einen Iframe hinzugefügt, um größere Websites zu laden, damit ich den Effekt sehen kann!
Die Wiedergabezeit des Öffnens von CSS -Animationen mit Safari wurde synchronisiert. Ich weiß nicht warum, aber der lokale Test ist in Ordnung (bitte geben Sie mir einen Rat!), Es gibt kein Problem mit Chrome und Firefox, aber ich habe nicht getestet, dh dh nicht getestet
Ladezeitstatistik Ich habe die Leistungseigenschaft eines Windows -Objekts verwendet, bei dem es sich um eine Methode handelt, die speziell zur Berechnung der genauen Zeit verwendet wird. Dies ist die Beschreibung der Leistungseigenschaft von MDN.
Das Implementierungsprinzip dieses Beispiels ist relativ einfach, zeigt jedoch nicht wirklich den Ladefortschritt gemäß der Dateigröße an. Es ändert nur den Anzeigefortschritt entsprechend dem Status des Dokuments. Tatsächlich gibt es eine weitere zuverlässigere Methode, wobei das Fortschrittsereignis einer Instanz des XMLHTTPREQUEST -Objekts verwendet wird, um XMLHTTPrequest im Detail zu interpretieren, wie z. B.:
var request = new xmlhttprequest (); request.onprogress = function (e) {if (e.LengthComputable) {// LängeComputable bezieht sich darauf, ob die Datei eine Größe hat, der Wert true, false progresh. // geladen wird die Gesamtgröße und die Gesamtgröße, die geladen wurde}}}}Es ist ziemlich problematisch, mit der obigen Methode implementiert zu werden, und es kann nicht zu 100% echten Ladefortschritt erzielt werden. Deshalb habe ich einfach vorgetan, ein wenig falsch zu sein, keine Notwendigkeit für ihn!
In diesem Beispiel wird auch das Dokument verwendet. Hier ist meine Zusammenfassung davon: Eine Zusammenfassung der Methode zum Lesen und Schreiben von CSS -Stilen mit nativen JS
In Bezug auf die Implementierung der CSS -Animation lesen Sie bitte den Code selbst. Es ist ein sehr einfacher Code. Wenn Sie Schwierigkeiten haben, es zu lesen, wird empfohlen, die Grundlagen von CSS auszugleichen. Ich werde einige praktische Informationen einführen. Die Website des CSS Chinese Referenzhandbuchs. Ich habe nur begrenzte Ausdrucksfähigkeiten, also werde ich hier nicht daran kauen.
Hier ist der vollständige Code + Demonstration:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Sufu's works</title> <script> document.onreadystatechange = function () { function $id(id){return document.getElementById(id)} var width = 0,id, preloader_line = $ id ('preloader_line'). FirstElementChild, Preloader = $ id ('Preloader'), Preloader_Center = $ id ('preloader_center'), preloader_btn = $ id ('preloader_btn'), preloader_loder = $ id ('preloloader_loading'); if (document.readyState == "interaktiv") {laden (1,110,50); } if (document.readyState == "complete") {laden (5,120,16,7); preloader_loading.id = 'preloader_loadd'; preloader_loading.innerhtml = 'laden' complete '+' <br/> '+' mit: '+Performance.now (). tofixed (3)+' ms '; preloader_btn.innerhtml = 'Ente r'; preloader_btn.style.borderbottom = '4px Solid Green'; preloader_btn.style.fontStyle = 'inherit'; preloader_btn.style.fontsize = '24px'; if (document.stylesheets [0] .insertrule) {document.stylesheets [0] .insertrule ('#preloader_btn: hover {border-bottom: 4px solide grün; border-radius: 60px; color: rot;}', 0); } else {// kompatibel mit document.stylesheets [0] .Addrule ('#preloader_btn: hover {Border-Bottom: 4px Solid Green; Border-Radius: 60px; Farbe: rot;}', 0); } preloader_btn.onclick = function () {var opacity = 1, id; Funktion hide () {if (opazität <= 0) {clearimeout (id); preloader.style.display = 'none'; document.body.style.overflow = 'auto'; zurückkehren; } opazität -= 0,1; preloader.Style.opacity = opazität; id = setTimeout (function () {hide ();}, 50); } verstecken(); }; } Funktion laden (Schritt, max, Zeit) {if (width> = max) {clearimeout (id); if (max> = 120) {preloader_line.parentnode.style.display = 'none'; } zurückkehren; } Breite += Schritt; preloader_line.style.width = width+'px'; id = setTimeout (function () {lade (Schritt, max, Zeit);}, Zeit); }}}; </script> <style> Body {Überlauf: versteckt; } #Preloader {Position: absolut; Breite: 100%; Höhe: 100%; Hintergrundfarbe: weiß; Z-Index: 999; } #Preloader_Center {Position: absolut; links: 0; Rechts: 0; Top: 0; Breite: 150px; Höhe: 75px; Rand: Auto; } #Preloader_loading {Position: absolut; links: 0; Rechts: 0; Oben: 45px; Rand: Auto; Breite: 96px; Höhe: 30px; } #Preloader_load {Position: absolut; links: 0; Rechts: 0; Oben: 45px; Rand: Auto; Schriftgröße: 12px; Text-Align: Mitte; Zeilenhöhe: 30px; } #Preloader_loading span {Position: absolut; Breite: 10px; Höhe: 2px; Top: 0; unten: 0; Rand: Auto; Hintergrundfarbe: #9b59b6; Animation: Laden von 1,5S unendlichem Leichtigkeit; } #Preloader_loading span: n-te-kind (2) {links: 12px; Animation-Delay: .1s; } #Preloader_loading Span: n-te-Kind (3) {links: 24px; Animation-Delay: .2s; } #Preloader_loading span: n-te-child (4) {links: 36px; Animation-Delay: .3s; } #Preloader_loading Span: n-te-Kind (5) {links: 48px; Animation-Delay: .4s; } #Preloader_loading Span: n-te-Kind (5) {links: 48px; Animation-Delay: .4s; } #Preloader_loading Span: n-te-Kind (5) {links: 48px; Animation-Delay: .4s; } #Preloader_loading Span: n-te-Kind (5) {links: 48px; Animation-Delay: .4s; } #Preloader_loading span: n-te-child (4) {links: 36px; Animation-Delay: .3s; } #Preloader_loading Span: n-te-Kind (5) {links: 48px; Animation-Delay: .4s; } #Preloader_loading Span: n-te-Kind (5) {links: 48px; Animation-Delay: .4s; } #Preloader_loading Span: n-te-Kind (5) {links: 48px; Animation-Delay: .4s; } #Preloader_loading span: n-te-child (4) {links: 36px; Animation-Delay: .3s; } #Preloader_loading Span: n-te-Kind (5) {links: 48px; Animation-Delay: .4s; } #Preloader_load span: nth-child (6) {links: 50px; Animation-Delay: .5s; } #Preloader_loading span: n-te-child (7) {links: 62px; Animation-Delay: .6s; } #Preloader_loading Span: n-te-Kind (8) {links: 74px; Animation-Delay: .7s; } #Preloader_loading Span: n-te-Kind (9) {links: 86px; Animation-Delay: .8s; } @keyframes loading { 0%{height: 2px;background:#9b59b6;} 15%{height: 20px;background:#3498db;} 50%{height: 2px;background:#9b59b6;} 100%{height: 2px;background:#9b59b6;} } iframe{width: 100%;height: 1000px;} #Preloader_BTN {Position: Absolute; links: 0; Rechts: 0; Top: 0; Rand: Auto; Anzeige: Block; Breite: 122px; Höhe: 40px; Schriftgröße: 14px; Text-Align: Mitte; Zeilenhöhe: 40px; Cursor: Zeiger; Farbe: #9b59b6; Schriftstil: kursiv; -Webkit-Übergang: alle .5s; -moz-Übergang: alle .5s; -ms-Übergang: alle .5s; -O-Übergang: alle .5s; Übergang: alle .5s; } #Preloader_line {Position: absolut; links: 0; Rechts: 0; Top: 40px; Rand: Auto; Breite: 120px; Höhe: 2px; Grenze: 1PX Solid Green; } #Preloader_line span {display: block; Höhe: 2px; Breite: 0; Hintergrundfarbe: Grün; } </style></head><body><div id="preloader"> <div id="preloader_center"> <span id="preloader_btn">Loading...</span> <span id="preloader_line"> <span></span> </span> <div id="preloader_line"> <span></span> </span> <div ID = "PRELOODER_LOADING"> <span> </span> <span> </span> </span> <span> </span> <span> </span> </div> </div> </div> <frame src = "http://jd.com"> </iframe> </body> </html>Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.