Comment faire pour afficher une course de la barre de progression alors que la page est en cours de chargement

J'en veux pour preuve l'exécution d'un barre de progression alors que ma page est en cours de chargement comme ici, dans ma page.
J'ai utilisé un simple chargement de l'image dans mon exemple, mais je veux le convertir dans une barre de progression. Voici mon code:

JS:

$(window).load(function() {
    alert("hi");
    $('#loading').hide();
});

CSS:

#loading {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    display: block;
    opacity: 0.7;
    background-color: #fff;
    z-index: 99;
    text-align: center;
}

#loading-image {
    position: absolute;
    top: 100px;
    left: 240px;
    z-index: 100;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id="loading">
    <img id="loading-image" src="http://cdn.nirmaltv.com/images/generatorphp-thumb.gif" alt="Loading..." />
</div>
<div id="txt">
    <h2>Let AJAX change this text</h2>
</div>
<button>Change Content</button>

Ici est un JSFiddle

Ce qui rend votre site e.g 50% chargé?
c'est juste un exemple , je veux montrer une barre de progression à partir de 1% comme page de démarrage de chargement et est allé jusqu'à 100% lorsque le chargement est terminé .
Découvrez pace.js
D'accord avec @Mottie - je utiliser les github.hubspot.com/pace/docs/welcome pour mes projets. C'est un très bon plugin et c'est automatique, ce qui signifie que tout ce que vous avez à faire est d'inclure le script.
essayez ce simple tutoriel essayez ce simple fonction jQuery freakyjolly.com/simple-progress-percentage-small-bar-css-jquery

InformationsquelleAutor amit gupta | 2013-09-24

12

J'ai copié le code ci-dessous à partir de Cette page. Espérons que cela peut vous aider.
```
$.ajax({
  xhr: function() {
    var xhr = new window.XMLHttpRequest();
    //Upload progress
    xhr.upload.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with upload progress
        console.log(percentComplete);
      }
    }, false);
    //Download progress
    xhr.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with download progress
        console.log(percentComplete);
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "/",
  data: {},
  success: function(data) {
    //Do something success-ish
  }
});
```
- Pouvez-vous ajouter l'intégrer dans mon Violon?
- L'OP a demandé une page de chargement de la barre de progression. - Vous fourni un moyen pour déterminer la progression du téléchargement.
- +1, Vous avez répondu à la partie la plus difficile de cette question--déterminer un pourcentage de progression. La solution de "facilité" de la partie (la véritable barre de progression) pourrait être répondu de nombreuses façons, y compris un jQueryUI barre de progression: jqueryui.com/progressbar
- Cela ne veut pas répondre à la question en aucune façon. La COOP est à la recherche d'une barre de progression que l'affichage de la page de la progression du chargement. Cette réponse traite de l'avancement du téléchargement. Téléchargement != le téléchargement.
- Ne pouvez-vous pas les gars de la lire? Il a d'avancement de la mise à jour pour le téléchargement.
InformationsquelleAutor Tapas Pal
6

C'est un dilemme de la poule et de l'oeuf problème. Vous ne serez pas en mesure de le faire parce que vous avez besoin pour charger les actifs pour afficher la barre de progression widget, en ce moment, votre page sera entièrement ou partiellement téléchargé. Aussi, vous avez besoin de connaître la taille totale de la page avant de l'utilisateur demandeur, afin de calculer un pourcentage.

C'est plus de tracas que ce qu'il vaut.
- Bas-vote à cause de...?
- Je ne suis pas le downvoter, mais regardez mon scénario; index.html est d'abord envoyé au client avec jQuery déjà en elle, inline - sur le document prêt $(function() { /* here */ }) j'ai envie de prendre une énorme .js fichier qui est d'environ 1 MO, et donc de faire de sens en montrant à l'utilisateur une barre de progression!
- Chargement d'un élément d'actif sur la demande n'est pas le même que le chargement d'une page web, comprenant de multiples sources (images, feuilles de style, JavaScript, fichiers, etc). Vous pourriez mettre en œuvre une barre de progression pour le chargement d'un fichier unique sur la demande, mais pas pour une base de la requête HTTP d'une page web.
- Si c'est peut-être plus de tracas que ce qu'il vaut, je ne dirais pas qu'il ne peut pas être fait, car il est évident qu'elle A été faite (par exemple youtube et de plus en plus d'autres).
- Il peut être émulé, oui. Mais vous ne pouvez pas savoir comment grand d'une page jusqu'à ce que vous avez en fait, téléchargé cette page!
- C'est la réponse que vous voyez rarement sur le web, il n'ya pas beaucoup que vous pouvez faire pour mesurer la page web de la taille globale sur http, et en essayant de la rendre réelle est seulement inefficace, la plupart des développeurs de créer l'illusion de chargement (en mesurant en moyenne leurs pages de chargement, et de rendre la barre de 100% jusqu'à ce qu'elle est entièrement chargée). Ceci doit être examiné de plus en plus ouvertement sur le web.
- 1 MO est rien de moins de vivre .. et tu sais ce que je veux dire
InformationsquelleAutor Martin Bean

Étapes simples, les suivre et je pense qu'elle permettra de résoudre votre problème

Inclure ces Css dans votre page,

.progress {
position: relative;
height: 2px;
display: block;
width: 100%;
background-color: white;
border-radius: 2px;
background-clip: padding-box;
/*margin: 0.5rem 0 1rem 0;*/
overflow: hidden;
}
.progress .indeterminate {
background-color:black; }
.progress .indeterminate:before {
content: '';
position: absolute;
background-color: #2C67B1;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
-webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
.progress .indeterminate:after {
content: '';
position: absolute;
background-color: #2C67B1;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
-webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-webkit-animation-delay: 1.15s;
animation-delay: 1.15s; }
@-webkit-keyframes indeterminate {
0% {
left: -35%;
right: 100%; }
60% {
left: 100%;
right: -90%; }
100% {
left: 100%;
right: -90%; } }
@keyframes indeterminate {
0% {
left: -35%;
right: 100%; }
60% {
left: 100%;
right: -90%; }
100% {
left: 100%;
right: -90%; } }
@-webkit-keyframes indeterminate-short {
0% {
left: -200%;
right: 100%; }
60% {
left: 107%;
right: -8%; }
100% {
left: 107%;
right: -8%; } }
@keyframes indeterminate-short {
0% {
left: -200%;
right: 100%; }
60% {
left: 107%;
right: -8%; }
100% {
left: 107%;
right: -8%; } }

Alors inclure la barre de progression de votre balise body,

<div class="progress" id="PreLoaderBar">
<div class="indeterminate"></div>
</div>

puis il va commencer en tant que votre page se charge, et maintenant ce que vous avez à faire est de le cacher, quand le chargement de la page,ou de définir la visibilité à néant, ou cachés, à l'aide de javascript,

document.onreadystatechange = function () {
if (document.readyState === "complete") {
console.log(document.readyState);
document.getElementById("PreLoaderBar").style.display = "none";
}
}

Laissez-moi Savoir si vous rencontrez des problèmes et aussi, vous pouvez ajouter tout type de barre de progression, vous pouvez les trouver facilement, pour cet exemple, j'ai utilisé une barre de progression indéterminée.

Cela a résolu mon problème, bon travail.
réponse impressionnante!

InformationsquelleAutor Omkar Dixit

Dans cet exemple, j'ai créé un script JavaScript barre de progression (avec affichage en pourcentage), vous pouvez le contrôler et de le masquer à l'aide de JavaScript.

Dans cet exemple, la barre de progression des avances de chaque 100ms. Vous pouvez le voir dans JSFiddle

var elapsedTime = 0;
var interval = setInterval(function() {
timer()
}, 100);
function progressbar(percent) {
document.getElementById("prgsbarcolor").style.width = percent + '%';
document.getElementById("prgsbartext").innerHTML = percent + '%';
}
function timer() {
if (elapsedTime > 100) {
document.getElementById("prgsbartext").style.color = "#FFF";
document.getElementById("prgsbartext").innerHTML = "Completed.";
if (elapsedTime >= 107) {
clearInterval(interval);
history.go(-1);
}
} else {
progressbar(elapsedTime);
}
elapsedTime++;
}

InformationsquelleAutor M-Razavi

Prendre un coup d'oeil ici,

fichier html

<div class='progress' id="progress_div">
<div class='bar' id='bar1'></div>
<div class='percent' id='percent1'></div>
</div>
<div id="wrapper">
<div id="content">
<h1>Display Progress Bar While Page Loads Using jQuery<p>TalkersCode.com</p></h1>
</div>
</div>

fichier js

document.onreadystatechange = function(e) {
if (document.readyState == "interactive") {
var all = document.getElementsByTagName("*");
for (var i = 0, max = all.length; i < max; i++) {
set_ele(all[i]);
}
}
}
function check_element(ele) {
var all = document.getElementsByTagName("*");
var totalele = all.length;
var per_inc = 100 / all.length;
if ($(ele).on()) {
var prog_width = per_inc + Number(document.getElementById("progress_width").value);
document.getElementById("progress_width").value = prog_width;
$("#bar1").animate({
width: prog_width + "%"
}, 10, function() {
if (document.getElementById("bar1").style.width == "100%") {
$(".progress").fadeOut("slow");
}
});
} else {
set_ele(ele);
}
}
function set_ele(set_element) {
check_element(set_element);
}

il certainement résoudre votre problème pour le tutoriel complet voici le lien http://talkerscode.com/webtricks/display-progress-bar-while-page-loads-using-jquery.php

InformationsquelleAutor naresh

Vous devez vous connecter pour publier un commentaire.