Lorsque nous naviguons sur le Web, nous voyons souvent l'invite LOADING qui apparaît lors du chargement des données. En fait, le principe de cette fonction est très simple, c'est-à-dire qu'un DIV couvre la page en cours, puis Loading est affiché sur la couche DIV couverte. Implémentons-le maintenant.
1.Page actuelle :
Copiez le code comme suit :
<div><a href="#" onclick="showLoading()">Chargement</a></div>
2. Couche de masque :
Copiez le code comme suit :
<div id="over"></div>
3. Chargement de la couche d'affichage :
Copiez le code comme suit :
<div id="layout"><img src="//files.VeVB.COm/file_images/article/201311/2013112931.gif" /></div>
Code global :
Copiez le code comme suit :
<!DOCTYPEhtml>
<html xmlns="http://www.w3.org/1999/xhtml">
<tête>
<titre></titre>
<style type="text/css">
.actuel un {
taille de police : 20 px ;
}
.sur {
affichage : aucun ;
position : absolue ;
haut : 0 ;
gauche : 0 ;
largeur : 100 % ;
hauteur : 100 % ;
couleur d'arrière-plan : #f5f5f5 ;
opacité : 0,5 ;
indice z : 1000 ;
}
.mise en page {
affichage : aucun ;
position : absolue ;
haut : 40 % ;
gauche : 40 % ;
largeur : 20 % ;
hauteur : 20 % ;
indice z : 1001 ;
texte-align:centre;
}
</style>
<script type="text/javascript">
fonction showLoading()
{
document.getElementById("over").style.display = "block";
document.getElementById("layout").style.display = "block";
}
</script>
</tête>
<corps>
<div><a href="#" onclick="showLoading()">Chargement</a></div>
<div id="over"></div>
<div id="layout"><img src="//files.VeVB.COm/file_images/article/201311/2013112931.gif" /></div>
</corps>
</html>
Effet final :
J'ai également vu une autre méthode d'implémentation sur Internet. Je pense que l'idée est bonne, qui consiste à utiliser JS pour modifier continuellement la valeur de la balise html afin d'obtenir l'effet de chargement des invites. Selon son idée, je l'ai implémentée moi-même. le code est le suivant :
Copiez le code comme suit :
<!DOCTYPEhtml>
<html xmlns="http://www.w3.org/1999/xhtml">
<tête>
<titre></titre>
<!-- <script src="Scripts/jquery-1.8.2.js"></script>-->
<style type="text/css">
#tb {
largeur : 100 % ;
hauteur : 100 % ;
hauteur de ligne : 10 px ;
}
#tb trtd {
alignement du texte : centre ;
}
.barre de progression {
famille de polices : Arial ;
poids de la police : plus gras ;
couleur : gris ;
couleur de fond : blanc ;
remplissage : 0px ;
style de bordure : aucun ;
}
.pour cent {
famille de polices : Arial ;
couleur : gris ;
alignement du texte : centre ;
largeur de bordure : moyenne ;
style de bordure : aucun ;
}
</style>
<script type="text/javascript">
var barre = 0 ;
var étape = "||";
/*
*La première méthode est : $(document).ready(function(){.....});
*/
//$(fonction () {
// progrès();
//});
/*
*La deuxième façon
*/
//window.onload = fonction () {
// progrès();
//}
/*
*La troisième méthode simule $(document).ready(function(){.....});
*/
(fonction () {
var c'est à dire = !!(window.attachEvent && !window.opera);
var wk = /webkit//(/d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
var fn = [];
var run = function () { for (var i = 0; i < fn.length; i++) fn[i]( };
var d = document ;
d. prêt = fonction (f) {
if (!ie && !wk && d.addEventListener)
return d.addEventListener('DOMContentLoaded', f, false);
if (fn.push(f) > 1) return ;
si (c'est-à-dire)
(fonction () {
essayez { d.documentElement.doScroll('left'); run( }
catch (err) { setTimeout(arguments.callee, 0 });
})();
sinon si (semaine)
var t = setInterval(fonction () {
si (/^(chargé|complet)$/.test(d.readyState))
clearInterval(t), run();
}, 0);
} ;
})();
document.ready(fonction () {
progrès();
});
fonction progression() {
barre = barre + 2 ;
étape = étape + "||" ;
document.getElementById("percent").value = barre + "%";
document.getElementById("progressbar").value = step;
si (barre <= 98) {
setTimeout("progrès()", 100);
}
}
</script>
</tête>
<corps>
<identifiant de la table="tb">
<tr>
<td>
<input type="text" size="50" id="percent" /></td>
</tr>
<tr>
<td>
<input type="text" size="50" id="progressbar" /></td>
</tr>
</table>
</corps>
</html>
Effet final :