El programa de animación de carga JS de progreso es mi trabajo personal. Si no está bien escrito, puede consultarlo, pero sin mi permiso, ¡no lo use para otros fines!
Escribí un progreso de la página de inicio que carga la animación por la mañana. Quería usarlo en mi blog. Descubrí que el parque de blogs se cargaba demasiado rápido y no podía ver el efecto de animación en absoluto. Acabo de cargar 'completo'. ¡Olvídalo, no hagas que el blog sea demasiado hinchado!
Así que escribí una página de demostración y agregué un iframe al cuerpo para cargar sitios web más grandes, ¡para que pueda ver el efecto!
El tiempo de reproducción de la apertura de las animaciones de CSS con Safari se ha sincronizado. No sé por qué, pero la prueba local está bien (¡por favor dame algunos consejos!), No hay problema con Chrome y Firefox, pero no he probado IE.
Estadísticas de tiempo de carga utilicé la propiedad de rendimiento de un objeto Windows, que es un método utilizado específicamente para calcular la hora exacta. Esta es la descripción de MDN de la propiedad de rendimiento.
El principio de implementación de este ejemplo es relativamente simple, pero realmente no muestra el progreso de carga de acuerdo con el tamaño del archivo. Solo cambia el progreso de la pantalla de acuerdo con el estado de document.readyState cuando se activa el evento Document.OnreadyStateChange. De hecho, hay otro método más confiable, utilizando el evento de progreso de una instancia del objeto xmlhttprequest para interpretar xmlhttprequest en detalle, como:
Var request = new xmlhttprequest (); request.onProgress = function (e) {if (e.lengthComputable) {// longitudComputable se refiere a si el archivo tiene un tamaño, el valor es verdadero, falso progreso.innerhtml = math.round (100* e.loaded/e.total) +/'%/'; // cargado, el total representa el tamaño y el tamaño total que se ha cargado}}Es bastante problemático implementar con el método anterior, y no puede lograr un progreso de carga 100% real, por lo que fingí ser un poco falso, ¡no hay necesidad de él!
Este ejemplo también usa el método document.stylesheets [0] .insertule (). Aquí está mi resumen: un resumen del método de leer y escribir estilos CSS con JS nativo
Con respecto a la implementación de la animación CSS, lea el código usted mismo. Es un código muy simple. Si tiene dificultades para leerlo, se recomienda compensar los conceptos básicos de CSS. Presentaré información práctica. El sitio web del manual de referencia chino CSS. Tengo habilidades de expresión limitadas, por lo que no lo masticaré aquí.
Aquí está el código completo + demostración:
<! Doctype html> <html lang = "en"> <lEd> <meta charset = "utf-8"> <title> sufu funciona </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_loader_loader_loading'); if (document.readyState == "Interactive") {Loading (1,110,50); } if (document.readyState == "Complete") {Carga (5,120,16.7); preloader_loading.id = 'preloader_loaded'; preloader_loading.innerhtml = 'Cargar Complete'+'<br/>'+'usando:'+rendimiento.now (). tofixed (3)+'ms'; preloader_btn.innerhtml = 'ente r'; preloader_btn.style.borderbottom = '4px sólido verde'; preloader_btn.style.fontstyle = 'heredero'; preloader_btn.style.fontsize = '24px'; if (document.stylesheets [0] .insertrule) {document.stylesheets [0] .inserTrule ('#preloader_btn: hover {border-bottom: 4px sólido verde; border-radio: 60px; color: rojo;}', 0); } else {// Compatible con document.stylesheets [0] .addrule ('#preloader_btn: hover {border-bottom: 4px sólido verde; border-radio: 60px; color: rojo;}', 0); } preloader_btn.onclick = function () {var opacity = 1, id; function hide () {if (opacidad <= 0) {cleartimeout (id); preloader.style.display = 'ninguno'; document.body.style.overflow = 'Auto'; devolver; } Opacidad -= 0.1; preloader.style.opacity = opacidad; id = setTimeout (function () {hide ();}, 50); } esconder(); }; } Carga de función (step, max, time) {if (width> = max) {cleartimeout (id); if (max> = 120) {preloader_line.parentnode.style.display = 'none'; } devolver; } ancho += paso; preloader_line.style.width = ancho+'px'; id = setTimeOut (function () {carging (step, max, time);}, tiempo); }}}; </script> <style> Body {Overflow: Hidden; } #preloader {posición: absoluto; Ancho: 100%; Altura: 100%; Color de fondo: blanco; Índice Z: 999; } #preloader_center {posición: absoluto; Izquierda: 0; Derecha: 0; arriba: 0; Ancho: 150px; Altura: 75px; margen: auto; } #preloader_loading {posición: absoluto; Izquierda: 0; Derecha: 0; arriba: 45px; margen: auto; Ancho: 96px; Altura: 30px; } #preloader_loaded {posición: absoluto; Izquierda: 0; Derecha: 0; arriba: 45px; margen: auto; tamaño de fuente: 12px; Text-Align: Center; Línea de altura: 30px; } #preloader_loading span {posición: absoluto; Ancho: 10px; Altura: 2px; arriba: 0; Abajo: 0; margen: auto; Color de fondo: #9B59B6; Animación: Cargando 1.5s Infinite Fase-Out; } #preloader_loading span: nth-child (2) {izquierda: 12px; Animación-retraso: .1s; } #preloader_loading span: nth-child (3) {izquierda: 24px; Animación-retraso: .2s; } #preloader_loading span: nth-child (4) {izquierda: 36px; Animación-retraso: .3s; } #preloader_loading span: nth-child (5) {izquierda: 48px; Animación-retraso: .4s; } #preloader_loading span: nth-child (5) {izquierda: 48px; Animación-retraso: .4s; } #preloader_loading span: nth-child (5) {izquierda: 48px; Animación-retraso: .4s; } #preloader_loading span: nth-child (5) {izquierda: 48px; Animación-retraso: .4s; } #preloader_loading span: nth-child (4) {izquierda: 36px; Animación-retraso: .3s; } #preloader_loading span: nth-child (5) {izquierda: 48px; Animación-retraso: .4s; } #preloader_loading span: nth-child (5) {izquierda: 48px; Animación-retraso: .4s; } #preloader_loading span: nth-child (5) {izquierda: 48px; Animación-retraso: .4s; } #preloader_loading span: nth-child (4) {izquierda: 36px; Animación-retraso: .3s; } #preloader_loading span: nth-child (5) {izquierda: 48px; Animación-retraso: .4s; } #preloader_load span: nth-child (6) {izquierda: 50px; Animación-retraso: .5s; } #preloader_loading span: nth-child (7) {izquierda: 62px; Animación-retraso: .6s; } #preloader_loading span: nth-child (8) {izquierda: 74px; Animación-retraso: .7s; } #preloader_loading span: nth-child (9) {izquierda: 86px; Animación-retraso: .8s; } @Keyframes Carging {0%{altura: 2px; fondos:#9b59b6;} 15%{altura: 20px; fondo:#3498db;} 50%{altura: 2px; fondo:#9b59b6;} 100%{altura: 2px; fondo:#9b59b6;}} iframe {width: 100%; 1000PX;} #PReloader_Btn {posición: absoluto; Izquierda: 0; Derecha: 0; arriba: 0; margen: auto; Pantalla: bloque; Ancho: 122px; Altura: 40px; tamaño de fuente: 14px; Text-Align: Center; Línea de altura: 40px; cursor: puntero; Color: #9B59B6; estilo de fuente: cursiva; -WebKit-Transition: todos .5s; -Moz-Transition: todos .5s; -Ms-Transition: todos .5s; -O-transición: todos .5s; Transición: todos .5s; } #preloader_line {posición: absoluto; Izquierda: 0; Derecha: 0; Arriba: 40px; margen: auto; Ancho: 120px; Altura: 2px; borde: 1px verde sólido; } #preloader_line span {display: block; Altura: 2px; Ancho: 0; Color de fondo: verde; } </ystye> </head> <body> <div id = "preloader"> <div id = "preloader_center"> <span id = "preloader_btn"> cargando ... </span> <span id = "preloader_line"> <span> </span> </span> <1Sd Id = "preloader_line"> </span> </span> span id = "preloader_loading"> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> </div> </div> </div> <iframe src = "http://jd.com"> </fiRiMe> </body> </html>Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.