Explication détaillée de la progression du chargement de la page Web (recommandée)

(Lorsque la page Web est chargée, le contenu est parfois trop, et il a été chargé et en attente. Pour le moment, la page Web montre que White n'affiche rien. L'expérience de l'utilisateur est assez mauvaise. Par conséquent, la forme de bande est affiché pour les utilisateurs.

Les façons courantes sont les suivantes:

 <script type = text / javascript> $ (function () {var chargement = '<div class = charging> <div class = pic> </div> </div>'; $ (body). g); function () {$ (. Chargement).

Pour charger la barre de progression en fonction du contenu réel, deux points de connaissance sont introduits ci-dessous:

Document.OnreadyStateChange Page Chargement de l'état Modifications de l'événement

document.readystate renvoie l'état du document actuel

1. Non-initialisé - pas mais a commencé à charger

2. Chargement -

3. Télélé interactif, le document et l'utilisateur peuvent commencer à interagir

4. Téléchargement complet complet

 document.onreadystateChange = function () {if (doctumed.readystate == complet) {$ (. Chargement) .fadeout ();}}

Site Web recommandé: https://preloaders.net/ Ce site Web a diverses petites animations qui indiquent le chargement chargé

http://autoprefixer.github.io/ Pour ajouter des préfixes à CSS en ligne

https://loading.io/ petite animation progressive

Remarque: Cette réalisation n'est pas l'affichage réel de la progression du chargement, mais utilise: le principe de l'exécution du code de haut en bas

Dans différentes positions du code, modifiez la largeur des lignes.

Comme indiqué ci-dessous:

Créer des objets d'image: Image Object Name = new Image ();

Utilisation: événement en ligne

Remarque: l'attribut SRC doit être écrit derrière le Onload, sinon le programme fera une erreur dans IE

Ce qui précède est tout le contenu de cet article.