Le programme d'animation JS Progress Charging est mon travail personnel. S'il n'est pas bien écrit, vous pouvez vous y référer, mais sans ma permission, veuillez ne pas l'utiliser à d'autres fins!
J'ai écrit une page de progression de la page d'accueil en chargeant l'animation le matin. Je voulais l'utiliser sur mon blog. J'ai trouvé que le parc du blog était chargé trop vite et ne pouvait pas voir l'effet d'animation. Je viens de charger «complet». Oubliez ça, ne rendez pas le blog trop gonflé!
J'ai donc écrit une page de démonstration et ajouté un iframe au corps pour charger des sites Web plus grands, afin que je puisse voir l'effet!
Le temps de lecture de l'ouverture des animations CSS avec Safari est devenu synchronisé. Je ne sais pas pourquoi, mais le test local est bien (s'il vous plaît donnez-moi quelques conseils!), Il n'y a aucun problème avec Chrome et Firefox, mais je n'ai pas testé IE
Chargement des statistiques de temps J'ai utilisé la propriété Performance d'un objet Windows, qui est une méthode spécifiquement utilisée pour calculer l'heure exacte. Il s'agit de la description de MDN de la propriété Performance.
Le principe d'implémentation de cet exemple est relativement simple, mais il n'affiche pas vraiment la progression de chargement en fonction de la taille du fichier. Il ne modifie les progrès de l'affichage en fonction de l'état du document.readystate lorsque l'événement Document.OnreadyStateChange est déclenché. En fait, il existe une autre méthode plus fiable, en utilisant l'événement de progression d'une instance de l'objet XMLHTTPRequest pour interpréter XMLHTTPRequest en détail, comme:
var request = new xmlhttprequest (); request.onprogress = function (e) {if (e.Lengthcompitableable) {// LongueurComptable fait référence à la question de savoir si le fichier a une taille, la valeur est vraie, false progress.innerhtml = math.round (100 * e.loaded / e.total) + / '% /'; // chargé, le total représente la taille et la taille totale qui a été chargée}}Il est assez gênant à mettre en œuvre avec la méthode ci-dessus, et il ne peut pas réaliser des progrès de chargement à 100%, donc j'ai fait semblant d'être un peu faux, pas besoin de lui!
Cet exemple utilise également la méthode document.stylesheets [0] .insertrule (). Voici mon résumé de celui-ci: un résumé de la méthode de lecture et d'écriture des styles CSS avec JS natif
En ce qui concerne la mise en œuvre de l'animation CSS, veuillez lire le code vous-même. C'est un code très simple. Si vous avez du mal à le lire, il est recommandé de compenser les bases du CSS. Je vais présenter des informations pratiques. Le site Web du manuel de référence chinois CSS. J'ai des compétences d'expression limitées, donc je ne mâcherai pas ici.
Voici le code complet + démonstration:
<! Doctype html> <html lang = "en"> <éad> <meta charset = "utf-8"> <Title> SUFU's Works </Title> <Script> document.OneReadyStateChange = Function () {function $ id (id) {return document.getelementById (id)} var width = 0, id, proLoader_line = $ id ('preloader_line'). PremierElementChild, preloader = $ id ('preloader'), preloader_center = $ id ('preloader_center'), preloder_btn = $ id ('preloader_btn'); if (document.readystate == "interactif") {chargement (1,110,50); } if (document.readystate == "complet") {chargement (5,120,16.7); preloader_loking.id = 'preloader_loaded'; preloader_loking.innerhtml = 'Chargement complet' + '<br/>' + 'using:' + performance.now (). tofixed (3) + 'ms'; preloader_btn.innerhtml = 'ente r'; preloader_btn.style.borderbottom = '4px Solid Green'; preloader_btn.style.fontstyle = 'hériter'; preloader_btn.style.fontize = '24px'; if (document.stylesheets [0] .insertrule) {document.stylesheets [0] .insertrule ('# preloader_btn: hover {border-bottom: 4px solide vert; border-radius: 60px; couleur: rouge;}', 0); } else {// compatible avec document.stylesheets [0] .Addrule ('# preloader_btn: hover {border-bottom: 4px Green solide; border-radius: 60px; couleur: rouge;}', 0); } preloader_btn.onclick = function () {var opacity = 1, id; function hide () {if (opacity <= 0) {ClearTimeout (id); preloader.style.display = 'Aucun'; document.body.style.overflow = 'auto'; retour; } opacité - = 0,1; preloader.style.opacity = opacity; id = setTimeOut (function () {hide ();}, 50); } cacher(); }; } Fonction Chargement (Step, Max, Time) {if (width> = max) {ClearTimeout (id); if (max> = 120) {preloader_line.parentnode.style.display = 'Aucun'; } retour; } largeur + = étape; preloader_line.style.width = width + 'px'; id = setTimeout (function () {charging (Step, max, time);}, time); }}}; </cript> <ystyle> Body {Overflow: Hidden; } #preloader {position: absolue; Largeur: 100%; hauteur: 100%; Color d'arrière-plan: blanc; Z-Index: 999; } #preloader_center {position: absolue; à gauche: 0; à droite: 0; en haut: 0; Largeur: 150px; hauteur: 75px; marge: auto; } #preloader_loking {position: absolue; à gauche: 0; à droite: 0; En haut: 45px; marge: auto; Largeur: 96px; hauteur: 30px; } #preloader_loaded {position: absolue; à gauche: 0; à droite: 0; En haut: 45px; marge: auto; taille de police: 12px; Texte-aligne: Centre; hauteur de ligne: 30px; } #preloader_loking span {position: absolue; Largeur: 10px; hauteur: 2px; en haut: 0; en bas: 0; marge: auto; Color en arrière-plan: # 9B59B6; Animation: Chargement de 1,5S infinie facilité-in-out; } #preloader_loading span: nth-child (2) {Left: 12px; Animation-retard: .1s; } #preloader_loading span: nth-child (3) {Left: 24px; Animation-retard: .2s; } #preloader_loading span: nth-child (4) {Left: 36px; Animation-retard: .3s; } #preloader_loading span: nth-child (5) {Left: 48px; Animation-retard: .4S; } #preloader_loading span: nth-child (5) {Left: 48px; Animation-retard: .4S; } #preloader_loading span: nth-child (5) {Left: 48px; Animation-retard: .4S; } #preloader_loading span: nth-child (5) {Left: 48px; Animation-retard: .4S; } #preloader_loading span: nth-child (4) {Left: 36px; Animation-retard: .3s; } #preloader_loading span: nth-child (5) {Left: 48px; Animation-retard: .4S; } #preloader_loading span: nth-child (5) {Left: 48px; Animation-retard: .4S; } #preloader_loading span: nth-child (5) {Left: 48px; Animation-retard: .4S; } #preloader_loading span: nth-child (4) {Left: 36px; Animation-retard: .3s; } #preloader_loading span: nth-child (5) {Left: 48px; Animation-retard: .4S; } #preloader_load span: nth-child (6) {Left: 50px; Animation-retard: .5s; } #preloader_loading span: nth-child (7) {Left: 62px; Animation-retard: .6s; } #preloader_loading span: nth-child (8) {Left: 74px; Animation-retard: .7s; } #preloader_loading span: nth-child (9) {Left: 86px; Animation-retard: .8s; } @KeyFrames Chargement {0% {hauteur: 2px; arrière-plan: # 9b59b6;} 15% {hauteur: 20px; arrière-plan: # 3498db;} 50% {hauteur: 2px; arrière-plan: # 9b59b6;} 100% {hauteur: 2px; arrière-plan: # 9b59b6;}} iframe {largement: 100%; 1000px;} #preloader_btn {position: absolue; à gauche: 0; à droite: 0; en haut: 0; marge: auto; Affichage: bloc; Largeur: 122px; hauteur: 40px; taille de police: 14px; Texte-aligne: Centre; hauteur de ligne: 40px; curseur: pointeur; Couleur: # 9B59B6; Style de police: italique; -Webkit-Transition: Tous .5S; -Moz-Transition: Tous .5S; -ms-transition: tous .5S; -o-transition: tous .5S; Transition: Tous .5S; } #preloader_line {position: absolue; à gauche: 0; à droite: 0; en haut: 40px; marge: auto; Largeur: 120px; hauteur: 2px; Border: 1px vert massif; } #preloader_line span {display: block; hauteur: 2px; Largeur: 0; Color en arrière-plan: vert; } </ style> </ head> <body> <div id = "preloader"> <div id = "preloader_center"> <span id = "preloader_btn"> Loading ... </ span> <span id = "preloder_line"> <span> </span> </span> <div id = "preloder_line"> <pander> </pander> <pander> id = "Preloader_loking"> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> </ div> </ div> </ div> <iframe src = "http://jd.com"> </ iframe> </ body> </html>Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.