English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Il programma di animazione di caricamento della progressione JavaScript è una mia opera personale, scritta male, ma può essere consultata, ma senza la mia autorizzazione, non dovrebbe essere utilizzato per altri scopi!
Ho scritto un'animazione di caricamento della pagina principale la mattina, volevo usarla nel mio blog, ma il test ha scoperto che il blog园 carica troppo velocemente, non si può vedere l'effetto dell'animazione, carica direttamente 'Completo',算了, meglio non rendere il blog troppo ingombrante!
Quindi ho scritto una pagina di demo, aggiungendo un iframe nel body per caricare un sito più grande, così posso vedere l'effetto!
Apertura di Safari sembra che il tempo di riproduzione dell'animazione CSS sia sincronizzato, non so la ragione, il test locale non ha problemi (per favore, indicami il mio errore!), Chrome e Firefox non hanno problemi, mentre IE non l'ho testato
Ho utilizzato l'attributo performance dell'oggetto Window per calcolare il tempo di caricamento, è un metodo specifico per calcolare il tempo esatto, ecco l'articolo MDN su}}proprietà performancela descrizione
La realizzazione di questo esempio è abbastanza semplice, ma non mostra veramente il progresso di caricamento in base alla dimensione del file, ma cambia la visualizzazione del progresso in base allo stato di document.readyState all'evento document.onreadystatechange. In realtà c'è anche un metodo più affidabile, utilizzare l'evento progress dell'istanza XMLHttpRequest, come:
var request = new XMLHttpRequest();
request.onprogress = function (e) {
if(e.lengthComputable){ //lengthComputable indica se il file ha una dimensione, valore true o false
progress.innerHTML = Math.round(100 * e.loaded / e.total) + '%'; //loaded, total indicano la dimensione già caricata e la dimensione totale
}
}
Realizzare tutto questo è piuttosto complicato, e non può nemmeno implementare un progresso di caricamento reale al 100%, quindi preferisco essere un po' ingannevole e non usarlo!
Questa esempio utilizza anche il metodo document.styleSheets[0].insertRule(), ecco la mia sintesi: Sommario dei metodi per leggere e scrivere stili CSS con JavaScript nativo
Riguardo all'esecuzione degli animazioni CSS, guardate il codice voi stessi, è un codice molto semplice, se vi sembra difficile, consiglio di fare un corso di base CSS, vi presento un contenuto utile:Sito web della guida CSS in cinese，la mia capacità di espressione è limitata, quindi non lo dilungo qui
Di seguito è l'intero codice + dimostrazione:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Opere di Su Fu</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 == "interactive") {
loading(1,110,50);
}
if (document.readyState == "complete") {
loading(5,120,16.7);
preloader_loading.id = 'preloader_loaded';
preloader_loading.innerHTML = 'Caricamento completato'+'<br/>'+'Utilizzando: '+performance.now().toFixed(3)+' ms';
preloader_btn.innerHTML = 'E N T E 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 solid green;border-radius: 60px;color: red;}',0);
}else{//Compatibile con IE9 e inferiori
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;
function hide(){
if(opacity<=0){
clearTimeout(id);
preloader.style.display = 'none';
document.body.style.overflow = 'auto';
return;
}
opacity -= 0.1;
preloader.style.opacity = opacity;
id = setTimeout(function(){
hide();
},50);
}
hide();
};
}
function loading(step,max,time){
if(width>=max){
clearTimeout(id);
if(max >= 120){
preloader_line.parentNode.style.display = 'none';
}
return;
}
width += step;
preloader_line.style.width = width+'px';
id = setTimeout(function(){
loading(step,max,time);
},time);
}
};
</script>
<style>
body{
overflow: hidden;
}
#preloader{
position: absolute;
width: 100%;
height: 100%;
background-color: white;
z-index: 999;
}
#preloader_center{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 150px;
height: 75px;
margin: auto;
}
#preloader_loading{
position: absolute;
left: 0;
right: 0;
top: 45px;
margin: auto;
width: 96px;
height: 30px;
}
#preloader_loaded{
position: absolute;
left: 0;
right: 0;
top: 45px;
margin: auto;
font-size: 12px;
text-align: center;
line-height: 30px;
}
#preloader_loading span{
position: absolute;
width: 10px;
height: 2px;
top: 0;
bottom: 0;
margin: auto;
background-color: #9b59b6;
animation: loading 1.5s infinite ease-in-out ;
}
#preloader_loading span:nth-child(2){
sinistra: 12px;
animation-delay: 0,1s;
}
#preloader_loading span:nth-child(3){
sinistra: 24px;
animation-delay: 0,2s;
}
#preloader_loading span:nth-child(4){
sinistra: 36px;
animation-delay: 0,3s;
}
#preloader_loading span:nth-child(5){
sinistra: 48px;
animation-delay: 0,4s;
}
#preloader_loading span:nth-child(6){
sinistra: 50px;
animation-delay: 0,5s;
}
#preloader_loading span:nth-child(7){
sinistra: 62px;
animation-delay: 0,6s;
}
#preloader_loading span:nth-child(8){
sinistra: 74px;
animation-delay: 0,7s;
}
#preloader_loading span:nth-child(9){
sinistra: 86px;
animation-delay: 0,8s;
}
@keyframes loading {
0%{altezza: 2px; sfondo: #9b59b6;}
15%{altezza: 20px; sfondo: #3498db;}
50%{altezza: 2px; sfondo: #9b59b6;}
100%{altezza: 2px; sfondo: #9b59b6;}
}
iframe{larghezza: 100%; altezza: 1000px;}
#preloader_btn{
position: absolute;
left: 0;
right: 0;
top: 0;
margin: auto;
display: block;
width: 122px;
height: 40px;
font-size: 14px;
text-align: center;
line-height: 40px;
cursor: pointer;
color: #9b59b6;
font-style: italic;
-webkit-transition: tutto 0,5s;
-moz-transition: tutto 0,5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#preloader_line{
position: absolute;
left: 0;
right: 0;
top: 40px;
margin: auto;
width: 120px;
height: 2px;
border: 1px solid green;
}
#preloader_line span{
display: block;
height: 2px;
width: 0;
background-color: green;
}
</style>
</head>
<body>
<div id="preloader">
<div id="preloader_center">
<span id="preloader_btn">Caricamento...</span>
<span id="preloader_line">
<span></span>
</span>
<div id="preloader_loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<iframe src="http://jd.com"></iframe>
</body>
</html>
Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua apprendimento, e speriamo che tu sostenga fortemente la guida a urla.
Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright è dell'autore originale, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non possiede il diritto di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito cancellerà immediatamente il contenuto sospetto di violazione del copyright.