โปรแกรมแอนิเมชั่นการโหลด JS Progress เป็นผลงานส่วนตัวของฉัน หากไม่ได้เขียนไว้อย่างดีคุณสามารถอ้างอิงได้ แต่หากไม่ได้รับอนุญาตจากฉันโปรดอย่าใช้เพื่อวัตถุประสงค์อื่น!
ฉันเขียนความคืบหน้าของหน้าแรกในการโหลดแอนิเมชั่นในตอนเช้า ฉันต้องการใช้มันในบล็อกของฉัน ฉันพบว่า Blog Park โหลดเร็วเกินไปและไม่เห็นเอฟเฟกต์ภาพเคลื่อนไหวเลย ฉันเพิ่งโหลด 'เสร็จสมบูรณ์' ลืมมันอย่าทำให้บล็อกป่องเกินไป!
ดังนั้นฉันจึงเขียนหน้าสาธิตและเพิ่ม iframe ลงในร่างกายเพื่อโหลดเว็บไซต์ขนาดใหญ่เพื่อที่ฉันจะได้เห็นเอฟเฟกต์!
เวลาเล่นของการเปิดแอนิเมชัน CSS กับ Safari ได้กลายเป็นซิงโครไนซ์ ฉันไม่รู้ว่าทำไม แต่การทดสอบในท้องถิ่นใช้ได้ดี (โปรดให้คำแนะนำกับฉัน!) ไม่มีปัญหากับ Chrome และ Firefox แต่ฉันยังไม่ได้ทดสอบเช่น
สถิติเวลาในการโหลดฉันใช้คุณสมบัติประสิทธิภาพของวัตถุ Windows ซึ่งเป็นวิธีที่ใช้โดยเฉพาะในการคำนวณเวลาที่แน่นอน นี่คือคำอธิบายของ MDN เกี่ยวกับคุณสมบัติประสิทธิภาพ
หลักการการนำไปใช้ของตัวอย่างนี้ค่อนข้างง่าย แต่มันไม่ได้แสดงความคืบหน้าในการโหลดตามขนาดไฟล์ มันเปลี่ยนความคืบหน้าการแสดงผลตามสถานะของ document.readystate เมื่อ document.onreadystatechange เหตุการณ์ถูกเรียกใช้ ในความเป็นจริงมีอีกวิธีที่น่าเชื่อถือมากกว่านี้โดยใช้เหตุการณ์ความคืบหน้าของอินสแตนซ์ของวัตถุ XMLHTTPREQUEST เพื่อตีความ XMLHTTPREQUEST ในรายละเอียดเช่น::
var request = ใหม่ xmlhttprequest (); request.onprogress = function (e) {ถ้า (e.lengthcomputable) {// lengthcomputable หมายถึงว่าไฟล์มีขนาดหรือไม่ค่านั้นเป็นจริงความคืบหน้าเท็จ // โหลดทั้งหมดแสดงถึงขนาดและขนาดทั้งหมดที่โหลด}}มันค่อนข้างลำบากที่จะนำไปใช้กับวิธีการข้างต้นและมันไม่สามารถบรรลุความคืบหน้าการโหลดจริง 100% ดังนั้นฉันจึงแกล้งทำเป็นปลอมเล็กน้อยไม่จำเป็นสำหรับเขา!
ตัวอย่างนี้ยังใช้ document.stylesheets [0] .insertrule () วิธี นี่คือบทสรุปของฉัน: บทสรุปของวิธีการอ่านและการเขียนสไตล์ CSS กับ JS พื้นเมือง
เกี่ยวกับการใช้งานแอนิเมชั่น CSS โปรดอ่านรหัสด้วยตัวเอง มันเป็นรหัสที่ง่ายมาก หากคุณมีปัญหาในการอ่านขอแนะนำให้ทำขึ้นสำหรับพื้นฐานของ CSS ฉันจะแนะนำข้อมูลที่เป็นประโยชน์ เว็บไซต์ของคู่มืออ้างอิงภาษาจีน CSS ฉันมีทักษะการแสดงออกที่ จำกัด ดังนั้นฉันจะไม่เคี้ยวที่นี่
นี่คือรหัสที่สมบูรณ์ + การสาธิต:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> ผลงานของ Sufu </title> <script> document.onreadystatechange = function () {function $ id (id) $ id ('preloader_line'). firstElementChild, preloader = $ id ('preloader'), preloader_center = $ id ('preloader_center'), preloader_btn = $ id ('preloader_btn'), preloader_loading if (document.readyState == "interactive") {โหลด (1,110,50); } if (document.readyState == "เสร็จสมบูรณ์") {โหลด (5,120,16.7); preloader_loading.id = 'preloader_loaded'; preloader_loading.innerhtml = 'โหลดเสร็จสมบูรณ์'+'<br/>'+'โดยใช้:'+performance.now (). tofixed (3)+'ms'; preloader_btn.innerhtml = 'ente r'; preloader_btn.style.borderbottom = '4px Solid Green'; preloader_btn.style.fontstyle = 'สืบทอด'; preloader_btn.style.fontsize = '24px'; if (document.stylesheets [0] .insertrule) {document.stylesheets [0] .insertrule ('#preloader_btn: Hover {border-bottom: 4px Solid Green; Border-Radius: 60px; สี: สีแดง;}', 0); } else {// เข้ากันได้กับ document.stylesheets [0] .addrule ('#preloader_btn: Hover {border-bottom: 4px Solid Green; Border-Radius: 60px; สี: สีแดง;}', 0); } preloader_btn.onclick = function () {var opacity = 1, id; ฟังก์ชั่นซ่อน () {ถ้า (ความทึบ <= 0) {cleartimeout (id); preloader.style.display = 'ไม่มี'; document.body.style.overflow = 'auto'; กลับ; } ความทึบ -= 0.1; preloader.style.Opacity = ความทึบ; id = settimeout (function () {hide ();}, 50); } ซ่อน(); - } การโหลดฟังก์ชั่น (ขั้นตอน, สูงสุด, เวลา) {ถ้า (width> = สูงสุด) {cleartimeout (id); if (max> = 120) {preloader_line.parentNode.style.display = 'none'; } กลับ; } ความกว้าง += ขั้นตอน; preloader_line.style.width = width+'px'; id = settimeout (function () {การโหลด (ขั้นตอน, สูงสุด, เวลา);}, เวลา); - </script> <style> ร่างกาย {ล้น: ซ่อน; } #preloader {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 100%; ความสูง: 100%; พื้นหลังสี: สีขาว; z-index: 999; } #preloader_center {ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; ขวา: 0; ด้านบน: 0; ความกว้าง: 150px; ความสูง: 75px; มาร์จิ้น: อัตโนมัติ; } #preloader_loading {ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; ขวา: 0; ด้านบน: 45px; มาร์จิ้น: อัตโนมัติ; ความกว้าง: 96px; ความสูง: 30px; } #preloader_loaded {ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; ขวา: 0; ด้านบน: 45px; มาร์จิ้น: อัตโนมัติ; ขนาดตัวอักษร: 12px; TEXT-ALIGN: CENTER; ระดับความสูง: 30px; } #preloader_loading Span {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 10px; ความสูง: 2px; ด้านบน: 0; ด้านล่าง: 0; มาร์จิ้น: อัตโนมัติ; พื้นหลังสี: #9B59B6; แอนิเมชั่น: กำลังโหลด 1.5s Infinite Ease-Out; } #preloader_loading Span: nth-child (2) {ซ้าย: 12px; แอนิเมชั่น-ล่าช้า: .1s; } #preloader_loading Span: nth-child (3) {ซ้าย: 24px; แอนิเมชั่น-เดย์: .2s; } #preloader_loading Span: nth-child (4) {ซ้าย: 36px; แอนิเมชั่น-ล่าช้า: .3s; } #preloader_loading Span: nth-child (5) {ซ้าย: 48px; แอนิเมชั่น-ล่าช้า: .4s; } #preloader_loading Span: nth-child (5) {ซ้าย: 48px; แอนิเมชั่น-ล่าช้า: .4s; } #preloader_loading Span: nth-child (5) {ซ้าย: 48px; แอนิเมชั่น-ล่าช้า: .4s; } #preloader_loading Span: nth-child (5) {ซ้าย: 48px; แอนิเมชั่น-ล่าช้า: .4s; } #preloader_loading Span: nth-child (4) {ซ้าย: 36px; แอนิเมชั่น-ล่าช้า: .3s; } #preloader_loading Span: nth-child (5) {ซ้าย: 48px; แอนิเมชั่น-ล่าช้า: .4s; } #preloader_loading Span: nth-child (5) {ซ้าย: 48px; แอนิเมชั่น-ล่าช้า: .4s; } #preloader_loading Span: nth-child (5) {ซ้าย: 48px; แอนิเมชั่น-ล่าช้า: .4s; } #preloader_loading Span: nth-child (4) {ซ้าย: 36px; แอนิเมชั่น-ล่าช้า: .3s; } #preloader_loading Span: nth-child (5) {ซ้าย: 48px; แอนิเมชั่น-ล่าช้า: .4s; } #preloader_load Span: nth-child (6) {ซ้าย: 50px; แอนิเมชั่น-ล่าช้า: .5s; } #preloader_loading Span: nth-child (7) {ซ้าย: 62px; แอนิเมชั่น-ล่าช้า: .6s; } #preloader_loading Span: nth-child (8) {ซ้าย: 74px; แอนิเมชั่น-ล่าช้า: .7s; } #preloader_loading Span: nth-child (9) {ซ้าย: 86px; แอนิเมชั่น-ล่าช้า: .8s; } @KeyFrames โหลด {0%{ความสูง: 2px; พื้นหลัง:#9B59B6;} 15%{ความสูง: 20px; พื้นหลัง:#3498DB;} 50%{ความสูง: 2px; พื้นหลัง:#9B59B6;} 100%{ความสูง: 2px; 1000px;} #preloader_btn {ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; ขวา: 0; ด้านบน: 0; มาร์จิ้น: อัตโนมัติ; แสดง: บล็อก; ความกว้าง: 122px; ความสูง: 40px; ขนาดตัวอักษร: 14px; TEXT-ALIGN: CENTER; สายไฟ: 40px; เคอร์เซอร์: ตัวชี้; สี: #9B59B6; แบบฟอนต์: ตัวเอียง; -webkit-transition:. 5s ทั้งหมด; -MOZ-TRANSITION:. 5S ทั้งหมด; -MS-TRANSITION: ทั้งหมด. 5s; -O-TRANSITION: ทั้งหมด. 5s; การเปลี่ยนแปลง:. 5s ทั้งหมด; } #preloader_line {ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; ขวา: 0; ด้านบน: 40px; มาร์จิ้น: อัตโนมัติ; ความกว้าง: 120px; ความสูง: 2px; ชายแดน: 1px Solid Green; } #preloader_line Span {display: block; ความสูง: 2px; ความกว้าง: 0; พื้นหลังสี: สีเขียว; } </style> </head> <body> <div id = "preloader"> <div id = "preloader_center"> <span id = "preloader_btn"> โหลด ... </span> <span id = "preloader_line" id = "preloader_loading"> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> </div> </div> </div> <iframe src = "http://jd.com">ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น