web-dev-qa-db-fra.com

précharge avec pourcentage - javascript / jquery

J'ai fait une recherche Google et je ne trouve pas de moyen de faire un chargement avec pourcentage. Quelqu'un sait comment je peux trouver un exemple de cela?

J'ai besoin d'une précharge pour un site Web de 0 à 100 sans barre, avant d'afficher le contenu, mais je ne trouve aucun exemple.

javascriptjqueryloadingprogress
19
anvd

Si vous souhaitez afficher le contenu uniquement lorsqu'il est entièrement chargé, vous pouvez essayer les deux options suivantes:

1) envelopper tout le contenu dans un <div id="wrapper" style="display:none;"></div> tag et à la fin de l'événement complet, affichez-le comme ceci:

$(function(){
    $("#wrapper").show();
});

2) Si cela ne résout toujours pas votre objectif, vous pouvez charger une page vide et récupérer du contenu en utilisant ajax:

$(function(){
    $.ajax({ 
        .......//AJAX params
        .......
        success:function(msg){
                    $("#wrapper").html(msg);//DO NEEDFUL WITH THE RETURNED VALUE
                });
});

EDIT: En utilisant queryLoader script fourni par gayadesign j'ai réussi à obtenir un certain succès: D

J'ai dû apporter quelques modifications au queryLoader.js fichier de la ligne 127 à 151. Le script modifié est le suivant. Essayez-le vous-même.

$(QueryLoader.loadBar).css({
        position: "relative",
        top: "50%",
        font-size:40px;
    font-weight:bold;
    line-height:50px;
    height:50px;
    width:100px;
    });
},

animateLoader: function() {
    var perc = (100 / QueryLoader.doneStatus) * QueryLoader.doneNow;
    if (perc > 99) {
        $(QueryLoader.loadBar).stop().animate({
            width: perc + "%"
        }, 5000, "linear", function() {
                $(this).html("<strong>100%</strong>");//MY EDIT
                QueryLoader.doneLoad();
            });
    } else {
    $(QueryLoader.loadBar).stop().animate({
        width: perc + "%"
    }, 5000, "linear", function() {
            //MY EDIT
            $(this).html("<strong>"+Math.round(perc)+"%</strong>");
        });
    }
},
12
TheVillageIdiot

Je recommande ce plugin. Son téléchargement étonnant de http://demo.inwebson.com/download/jpreloader.Zip voir en action ici http://www.inwebson.com/demo/jpreloader/ =

<script type="text/javascript" src="js/jpreLoader.js"></script>
<script type="text/javascript">// <![CDATA[
  $(document).ready(function() {
  $('body').jpreLoader();
    });
// ]]></script>

voici les liens vers la nouvelle version jpreloader 2.1 http://demo.inwebson.com/download/jpreloader-v2.Ziphttp://www.inwebson.com/demo/jpreloader -v2 /

17
elin3t

Tu ne peux pas.

Comme l'a dit zzzzBov, on ne sait pas combien de contenu il y aura, ni quelle est sa taille.

Vous pouvez le `` truquer '' avec quelque chose comme ça (par exemple, j'utilise des images):

var percentCounter = 0;

$.each(arrayOfImageUrls, function(index, value) {
    $('<img></img>').attr('src', value)    //load image
        .load(function() {
            percentCounter = (index / arrayOfImageUrls.length) * 100;    //set the percentCounter after this image has loaded
            $('#yourProgressContainer').text(percentCounter + '%');
        });
});

Comme je l'ai mentionné, ce n'est pas un vrai pourcentage du chargement des sites, mais une estimation approximative des images qui ont été chargées, en supposant que chaque image est à peu près de la même taille.

7
elwyn

Voir ce projet. Il fait bien ce que vous voulez.

http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

La démo est hébergée ici

http://www.gayadesign.com/scripts/queryLoader/

Télécharger les ici

http://www.gayadesign.com/scripts/queryLoader/queryLoader.Zip

2
esafwan