Javascript Girl
  1. Javascript Girl
  3. Image de progression pendant la chargement de la page
Intereting Posts
Javascript grands tableaux ou objets: performances et mémoire du navigateur Remplacer le texte par jquery Chrome ne peut pas définir de cookie sans serveur Déploiement d'un serveur Node.js de production L'iframe créé dynamiquement pour télécharger les déclencheurs de fichiers surchargés avec un firebug mais pas sans Comment mettre une variable dans une expression régulière? Demandes Ajax GET: utiliser les paramètres ou mettre des données dans l'URL? Comment calculer la distance de la polyligne? Redimensionner une image dans un canevas HTML5 Reactjs – définir correctement les styles en ligne Comment supprimer des espaces blancs supplémentaires en utilisant javascript ou jquery? Retour à la page précédente Bloquer les éléments en contenteditable = "true" div Problèmes avec JavaScript "for in" loop Manipulation des dates avec Asp.Net MVC et KnockoutJS

Image de progression pendant la chargement de la page

Avant de continuer:

  1. Je sais que cela a été fait avant.
  2. J'ai cherché SO pour cela avant de décider de publier ceci …

J'ai dit que j'ai remarqué que dans certains navigateurs qui ont des paramètres pour effacer le cache sur chaque visite à une page, certaines parties de ma page montrent avec retard. J'aimerais avoir une fonction qui affichera une image animée jusqu'à ce que la page soit finie de charger 100%.

Je voudrais le placer dans mon en-tête, y compris le fichier une fois et l'avoir lancé chaque fois qu'une page est chargée. Je pense que j'ai besoin d'être implémenté dans AJAX. J'aimerais que cette fonction soit autonome, c'est-à-dire non lié à d'autres fonctions. Devrais-je utiliser jQuery? Étant donné que jQuery lui-même requiert le chargement d'un fichier externe, devrais-je l'implémenter comme une simple fonction JS?

Tout commentaire serait très apprécié. Les exemples n'auraient aucune valeur.

🙂

MODIFIER:

J'ai trouvé un plug-in qui fait exactement ce dont j'ai besoin.

Avec jquery, vous pouvez faire quelque chose comme ça

Html 

<div id="loader"></div> $(window).load(function () { $("#loader").fadeOut(); });

Vous pouvez inclure un div avec un chargeur (le réparer, ou absolu, ce que vous voulez) et ensuite avec $ (window) .load (rappel); Vous pouvez détecter lorsque la page entière a fini de charger afin de cacher le chargeur.

Ou avec JS pur, vous pouvez faire de même, 

 window.onload = function() { document.getElementById('loader').style.display='none'; }

Vous pouvez utiliser l'attribut OnLoad pour. Faites quelque chose de similaire à: 

 <body onLoad='showLoadingDiv()'>

Et faites la fonction showLoadingDiv pour afficher une partition blanche pleine page avec un signe de chargement.

Une autre option (probablement préférée) est d'avoir un 

 <div style='background:white; width:100%; height:100%'>LOADING</div>

Et le cacher dès que la page se charge complètement , c'est-à-dire sous $(function() { }); de jQuery $(function() { });

Cette page comprend certaines images de progression AJAX à utiliser. 

 <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script> <script type="text/javascript"> //window.onload will wait for images window.onload = function() { //find element with id='progress' and hide it $('progress').hide(); } </script> </head> <body> <img id="progress" src="https://forums.embarcadero.com/servlet/JiveServlet/download/2-21014-135909-1751/progress2.gif" style="display:show;"> <h1="">This is a solar eclipse</h1> <img src="http://www.zam.fme.vutbr.cz/~druck/eclipse/Ecl2008m/Tse2008_1250_mo1/Hr/Tse2008_1250_mo1.png" width="50%" style="display:show;"> <p>Pretty and large enough to have to wait for</p> </body> </html>

J'espère que ça aide