Préchargez avec pourcentage - javascript / jquery
j'ai fait une recherche Google et je ne peux pas trouver un moyen de faire un chargement avec pourcentage. Quelqu'un sait comment je peux trouver un exemple de cela?
j'ai besoin d'un préchargement pour un site de 0-100 sans barre, avant d'afficher le contenu, mais je ne trouve aucun exemple.
4 réponses
si vous voulez dire que vous voulez montrer le contenu Seulement quand il est chargé, vous pouvez essayer les deux options suivantes:
1) envelopper tout le contenu à l'intérieur d'un <div id="wrapper" style="display:none;"></div> balise et sur la charge complète de l'événement le montrer comme ceci:
$(function(){
$("#wrapper").show();
});
2) si cela ne résout toujours pas votre problème, vous pouvez charger la page vide et récupérer le contenu en utilisant ajax:
$(function(){
$.ajax({
.......//AJAX params
.......
success:function(msg){
$("#wrapper").html(msg);//DO NEEDFUL WITH THE RETURNED VALUE
});
});
EDIT: Using queryLoader script fourni par gayadesign j'ai pu obtenir un certain succès : D
j'ai eu à apporté quelques modifications à l' queryLoader.js produisez de la ligne 127 à la ligne 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>");
});
}
},
je recommande ce plugin. Son incroyable télécharger à partir 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 de jpreloader 2.1 http://demo.inwebson.com/download/jpreloader-v2.zip http://www.inwebson.com/demo/jpreloader-v2/
Vous ne pouvez pas.
comme zzzzBov a dit, on ne sait pas combien de contenu il y aura, ou quelle taille ce contenu est.
Vous pourriez 'faux', avec quelque chose comme ceci (pour l'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 des sites de chargement, 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.
voir ce projet. Il fait ce que vous voulez bien.
http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/
la démo est hébergée ici
Télécharger ici
http://www.gayadesign.com/scripts/queryLoader/queryLoader.zip