O programa de animação de carga do JS Progress é o meu trabalho pessoal. Se não estiver bem escrito, você pode se referir a ele, mas sem minha permissão, não use -o para outros fins!
Eu escrevi uma página inicial da Página Página de Animação de Carregando de manhã. Eu queria usá -lo no meu blog. Descobri que o parque do blog carregava muito rápido e não podia ver o efeito de animação. Acabei de carregar 'completo'. Esqueça, não torne o blog muito inchado!
Então, escrevi uma página de demonstração e adicionei um iframe ao corpo para carregar sites maiores, para que eu possa ver o efeito!
O tempo de reprodução de abrir as animações do CSS com o Safari tornou -se sincronizado. Não sei por que, mas o teste local está bem (por favor me dê alguns conselhos!), Não há nenhum problema com o Chrome e o Firefox, mas não testei, ou seja,
Carregando estatísticas de tempo Eu usei a propriedade de desempenho de um objeto Windows, que é um método usado especificamente para calcular o tempo exato. Esta é a descrição do MDN da propriedade de desempenho.
O princípio da implementação deste exemplo é relativamente simples, mas realmente não exibe o progresso de carregamento de acordo com o tamanho do arquivo. Ele apenas altera o progresso da tela de acordo com o status do documento. De fato, existe outro método mais confiável, usando o evento de progresso de uma instância do objeto xmlHttPrequest para interpretar o xmlHttPrequest em detalhes, como:
var request = novo xmlHttPrequest (); request.onProgress = function (e) {if (e.LengthComputable) {// LengthComputable refere -se a se o arquivo tem um tamanho, o valor é verdadeiro, false progress.innerhtml = Math.Round (100* E.Loaded/e.total) +/'%/'; // carregado, o total representa o tamanho e o tamanho total que foram carregados}}É bastante problemático implementar com o método acima e ele não pode alcançar um progresso de carregamento 100% real, então eu apenas fingi ser um pouco falso, sem necessidade dele!
Este exemplo também usa o documento. Aqui está o meu resumo: um resumo do método de ler e escrever estilos CSS com JS nativo
Em relação à implementação da animação CSS, leia o código você mesmo. É um código muito simples. Se você tiver dificuldade em lê -lo, é recomendável compensar o básico do CSS. Vou introduzir algumas informações práticas. O site do Manual de Referência Chinesa do CSS. Eu tenho habilidades de expressão limitadas, então não vou mastigar aqui.
Aqui está o código completo + demonstração:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> obras de sufu </title> <ctript> document.onreadystatechange = function () {function $ id (id) {return document.getElementById (id)} var Wide $ id ('preladoDer_line'). FirstElementChild, Preloader = $ id ('Preloader'), Preloader_Center = $ id ('Preloader_Center'), Preloader_btn = $ ID ('Preloader_btn'), PrelOader_loading = $ (' if (document.readyState == "interactive") {carregamento (1.110,50); } if (document.readyState == "complete") {carregamento (5.120,16.7); pré -ader_loading.id = 'pré -ader_loaded'; pré -ader_loading.innerhtml = 'Carregando completo'+'<br/>'+'usando:'+performance.now (). tofixed (3)+'ms'; preloader_btn.innerhtml = 'entete r'; Preloader_btn.style.borderbottom = '4px verde sólido'; preloader_btn.style.fontstyle = 'herdar'; preloader_btn.style.fontsize = '24px'; if (document.stylesheets [0] .insertrule) {document.stylesheets [0] .insertrule ('#pré -ader_btn: hover {borda-bottom: 4px verde sólido; radio de borda: 60px; cor: vermelho;}', 0); } else {// compatível com document.stylesheets [0] .addrule ('#prelOader_btn: hover {borda-bottom: 4px verde sólido; radio de borda: 60px; cor: vermelho;}', 0); } preloader_btn.onClick = function () {var opacity = 1, id; function hide () {if (opacidade <= 0) {clearTimeout (id); preloader.style.display = 'nenhum'; document.body.style.overflow = 'Auto'; retornar; } opacidade -= 0,1; Preloader.style.Opacity = Opacity; id = setTimeout (function () {hide ();}, 50); } esconder(); }; } Função de carregamento (etapa, max, tempo) {if (width> = max) {cleartimeout (id); if (max> = 120) {preloader_line.parentnode.style.display = 'nenhum'; } retornar; } largura += etapa; pré -ader_line.style.width = width+'px'; id = setTimeout (function () {carregamento (etapa, max, tempo);}, tempo); }}}; </script> <yoy> corpo {Overflow: Hidden; } #preloader {Posição: Absolute; largura: 100%; Altura: 100%; cor de fundo: branco; Z-Index: 999; } #preloader_center {Position: Absolute; Esquerda: 0; Direita: 0; topo: 0; Largura: 150px; Altura: 75px; margem: automático; } #preloader_loading {Position: Absolute; Esquerda: 0; Direita: 0; Top: 45px; margem: automático; Largura: 96px; Altura: 30px; } #preloader_loaded {Position: Absolute; Esquerda: 0; Direita: 0; Top: 45px; margem: automático; tamanho de fonte: 12px; Alinhamento de texto: centro; altura de linha: 30px; } #preloader_loading span {Position: Absolute; Largura: 10px; Altura: 2px; topo: 0; Inferior: 0; margem: automático; Background-Color: #9B59B6; Animação: Carregando 1,5s Infinito Faculdade-In-Out; } #preloader_loading span: nth-filho (2) {esquerda: 12px; Animação-dely: .1s; } #preloader_loading span: nth-child (3) {esquerda: 24px; Animação-dely: .2s; } #preloader_loading span: nth-filho (4) {esquerda: 36px; Animação-dely: .3s; } #preloader_loading span: nth-filho (5) {esquerda: 48px; Animação-dely: .4s; } #preloader_loading span: nth-filho (5) {esquerda: 48px; Animação-dely: .4s; } #preloader_loading span: nth-filho (5) {esquerda: 48px; Animação-dely: .4s; } #preloader_loading span: nth-filho (5) {esquerda: 48px; Animação-dely: .4s; } #preloader_loading span: nth-filho (4) {esquerda: 36px; Animação-dely: .3s; } #preloader_loading span: nth-filho (5) {esquerda: 48px; Animação-dely: .4s; } #preloader_loading span: nth-filho (5) {esquerda: 48px; Animação-dely: .4s; } #preloader_loading span: nth-filho (5) {esquerda: 48px; Animação-dely: .4s; } #preloader_loading span: nth-filho (4) {esquerda: 36px; Animação-dely: .3s; } #preloader_loading span: nth-filho (5) {esquerda: 48px; Animação-dely: .4s; } #preloader_load Span: nh-child (6) {esquerda: 50px; Animação-dely: .5s; } #preloader_loading span: nth-child (7) {esquerda: 62px; Animação-Delay: .6s; } #preloader_loading span: nth-filho (8) {esquerda: 74px; Animação-dely: .7s; } #preloader_loading span: nth-child (9) {esquerda: 86px; Animação-dely: .8s; } @keyframes carregando {0%{altura: 2px; fundo:#9b59b6;} 15%{altura: 20px; fundo:#3498db;} 50%{altura: 2px; fundo:#9b59b6;} 100%{altura: 2px; background#9b6b6; 1000px;} #preloader_btn {Position: Absolute; Esquerda: 0; Direita: 0; topo: 0; margem: automático; exibição: bloco; Largura: 122px; Altura: 40px; Size da fonte: 14px; Alinhamento de texto: centro; altura da linha: 40px; Cursor: Ponteiro; Cor: #9B59B6; estilo de fonte: itálico; -Webkit-transição: todos .5s; -moz-transição: todos .5s; -ms-transição: todos .5s; -O-transição: todos .5s; transição: todos .5s; } #preloader_line {Position: Absolute; Esquerda: 0; Direita: 0; topo: 40px; margem: automático; Largura: 120px; Altura: 2px; borda: 1px verde sólido; } #preloader_line span {display: block; Altura: 2px; largura: 0; Background-Color: verde; } </style> </ad Head> <body> <div id = "pré -erDer"> <div id = "preloader_center"> <span id = "preloader_btn"> carregando ... </span <divid = "prelOader_line"> <pan> </span> </div id = "prelOader_line" id = "pré -ader_loading"> <pan> </span> <pan> </span> <pan> </span> </span> </span> </span> </span> </div> </div> </div> <iframe src = "http://jd.com"> </iframe> </body> </hml>O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.