Program Animasi Pemuatan Kemajuan JS adalah pekerjaan pribadi saya. Jika tidak ditulis dengan baik, Anda dapat merujuknya, tetapi tanpa izin saya, jangan gunakan itu untuk tujuan lain!
Saya menulis animasi pemuatan kemajuan beranda di pagi hari. Saya ingin menggunakannya di blog saya. Saya menemukan bahwa taman blog dimuat terlalu cepat dan tidak dapat melihat efek animasi sama sekali. Saya baru saja memuat 'lengkap'. Lupakan, jangan membuat blog terlalu kembung!
Jadi saya menulis halaman demo dan menambahkan iframe ke tubuh untuk memuat situs web yang lebih besar, sehingga saya dapat melihat efeknya!
Waktu pemutaran pembukaan animasi CSS dengan Safari telah disinkronkan. Saya tidak tahu mengapa, tetapi tes lokal baik -baik saja (tolong beri saya beberapa saran!), Tidak ada masalah dengan Chrome dan Firefox, tetapi saya belum menguji IE
Statistik Waktu Memuat Saya menggunakan properti kinerja objek Windows, yang merupakan metode yang secara khusus digunakan untuk menghitung waktu yang tepat. Ini adalah deskripsi MDN tentang properti kinerja.
Prinsip implementasi contoh ini relatif sederhana, tetapi tidak benar -benar menampilkan kemajuan pemuatan sesuai dengan ukuran file. Ini hanya mengubah kemajuan tampilan sesuai dengan status dokumen. Faktanya, ada metode lain yang lebih andal, menggunakan peristiwa kemajuan dari instance objek XMLHTTPREQUEST untuk menginterpretasikan XMLHTTPREQuest secara rinci, seperti:
var request = new XmlHttPRequest (); request.onprogress = function (e) {if (e.lengthComputable) {// panjang yang dapat dikalahkan mengacu pada apakah file tersebut memiliki ukuran, nilainya benar, false progress.innerHtml = Math.round (100* E.Loaded/e.total) +/'%/'; // dimuat, total mewakili ukuran dan ukuran total yang telah dimuat}}Sangat merepotkan untuk diimplementasikan dengan metode di atas, dan itu tidak dapat mencapai kemajuan pemuatan 100% nyata, jadi saya hanya berpura -pura menjadi sedikit palsu, tidak perlu untuknya!
Contoh ini juga menggunakan metode Document.Stylesheets [0] .IserTrule (). Inilah ringkasan saya: ringkasan metode membaca dan menulis gaya CSS dengan JS asli
Mengenai implementasi animasi CSS, silakan baca kodenya sendiri. Ini adalah kode yang sangat sederhana. Jika Anda mengalami kesulitan membacanya, disarankan untuk menebus dasar -dasar CSS. Saya akan memperkenalkan beberapa informasi praktis. Situs web Manual Referensi Cina CSS. Saya memiliki keterampilan ekspresi yang terbatas, jadi saya tidak akan mengunyahnya di sini.
Berikut adalah kode lengkap + demonstrasi:
<!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_loading = $ id ('preloader_loading'); if (document.readystate == "interaktif") {loading (1,110,50); } if (document.readystate == "complete") {loading (5,120,16.7); preloader_loading.id = 'preloader_loaded'; preloader_loading.innerHtml = 'memuat lengkap'+'<br/>'+'menggunakan:'+kinerja.now (). tofixed (3)+'ms'; preloader_btn.innerhtml = 'ente r'; preloader_btn.style.borderbottom = '4px solid green'; preloader_btn.style.fontstyle = 'warisan'; 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; color: red;}', 0); } else {// kompatibel dengan document.stylesheets [0] .addrule ('#preloader_btn: hover {border-bottom: 4px solid green; border-radius: 60px; color: red;}', 0); } preloader_btn.onClick = function () {var opacity = 1, id; fungsi hide () {if (opacity <= 0) {clearTimeout (id); preloader.style.display = 'none'; document.body.style.overflow = 'auto'; kembali; } opacity -= 0.1; preloader.style.opacity = opacity; id = setTimeout (function () {hide ();}, 50); } bersembunyi(); }; } Fungsi memuat (langkah, maks, waktu) {if (width> = max) {clearTimeout (id); if (max> = 120) {preloader_line.parentnode.style.display = 'none'; } kembali; } lebar += langkah; preloader_line.style.width = lebar+'px'; id = setTimeout (function () {loading (langkah, maks, waktu);}, waktu); }}}; </script> <tyle> body {overflow: tersembunyi; } #preloader {position: absolute; Lebar: 100%; Tinggi: 100%; Latar Belakang: Putih; z-index: 999; } #preloader_center {position: absolute; Kiri: 0; Kanan: 0; TOP: 0; Lebar: 150px; Tinggi: 75px; margin: otomatis; } #preloader_loading {position: absolute; Kiri: 0; Kanan: 0; Atas: 45px; margin: otomatis; Lebar: 96px; Tinggi: 30px; } #preloader_loaded {position: absolute; Kiri: 0; Kanan: 0; Atas: 45px; margin: otomatis; font-size: 12px; Teks-Align: tengah; Line-Height: 30px; } #preloader_loading span {position: absolute; Lebar: 10px; Tinggi: 2px; TOP: 0; Bawah: 0; margin: otomatis; Latar Belakang-Color: #9B59B6; Animasi: Memuat 1.5s tanpa batas kemudahan; } #preloader_loading span: nth-child (2) {left: 12px; Animasi-Delay: .1s; } #preloader_loading rentang: nth-child (3) {left: 24px; Animasi-Delay: .2s; } #preloader_loading rentang: nth-child (4) {left: 36px; Animasi-Delay: .3s; } #preloader_loading rentang: nth-child (5) {left: 48px; Animasi-Delay: .4s; } #preloader_loading rentang: nth-child (5) {left: 48px; Animasi-Delay: .4s; } #preloader_loading rentang: nth-child (5) {left: 48px; Animasi-Delay: .4s; } #preloader_loading rentang: nth-child (5) {left: 48px; Animasi-Delay: .4s; } #preloader_loading rentang: nth-child (4) {left: 36px; Animasi-Delay: .3s; } #preloader_loading rentang: nth-child (5) {left: 48px; Animasi-Delay: .4s; } #preloader_loading rentang: nth-child (5) {left: 48px; Animasi-Delay: .4s; } #preloader_loading rentang: nth-child (5) {left: 48px; Animasi-Delay: .4s; } #preloader_loading rentang: nth-child (4) {left: 36px; Animasi-Delay: .3s; } #preloader_loading rentang: nth-child (5) {left: 48px; Animasi-Delay: .4s; } #preloader_load span: nth-child (6) {left: 50px; Animasi-Delay: .5s; } #preloader_loading rentang: nth-child (7) {left: 62px; Animasi-Delay: .6s; } #preloader_loading span: nth-child (8) {left: 74px; Animasi-Delay: .7s; } #preloader_loading span: nth-child (9) {left: 86px; Animasi-Delay: .8s; } @KeyFrames memuat {0%{Height: 2px; latar belakang:#9b59b6;} 15%{tinggi: 20px; latar belakang:#3498db;} 50%{tinggi: 2px; latar belakang:#9b59b6;} 100%{tinggi: 2px; latar belakang:#9b59b6; 1000px;} #preloader_btn {position: absolute; Kiri: 0; Kanan: 0; TOP: 0; margin: otomatis; Tampilan: Blok; Lebar: 122px; Tinggi: 40px; Ukuran font: 14px; Teks-Align: tengah; Line-Height: 40px; kursor: pointer; Warna: #9B59B6; Font-style: Italic; -webkit-transisi: semua .5s; -Moz-transisi: semua .5s; -Ms-transisi: semua .5s; --transisi: semua .5s; Transisi: semua .5s; } #preloader_line {position: absolute; Kiri: 0; Kanan: 0; Atas: 40px; margin: otomatis; Lebar: 120px; Tinggi: 2px; Perbatasan: 1px Solid Green; } #preloader_line span {display: block; Tinggi: 2px; Lebar: 0; Latar Belakang: Hijau; } </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="preloader_loading"> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> </div> </div> </div> <iframe src = "http://jd.com"> </iframe> </body> </html>Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.