Comment créer un préchargeur jQuery avec un compteur en pourcentage?

J'ai écrit ce code que j'ai appris à partir d'un livre jQuery pour débutants, qui fonctionne très bien comme préchargeur pour la page, mais comment créer un compteur de pourcentage (%) pour celui-ci? - Basé sur combien de contenu du corps est chargé? En ce moment j'ai juste un GIF animé - mais j'aimerais quelque chose d'un peu plus avancé! :)Comment créer un préchargeur jQuery avec un compteur en pourcentage?

// Lets preload! 
$(window).load(function() { 
    $('#preloader').fadeOut('slow', function() { $(this).remove(); }); 
});

CSS:

#preloader { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1000; 
    width: 100%; 
    height: 100%; 
    background: #009933 url(uploads/images/ajax-loader2.gif) center center no-repeat; 
}

Toute aide serait grandement appréciée!

Merci.

Source

2010-11-21 Karlgoldstraw

Ce que vous faites ici n'est pas un préchargeur. Vous montrez simplement une image jusqu'à ce que le contenu soit chargé ... –

@Jan - Oui, vous avez raison, j'essaie d'afficher un compteur de progression/page jusqu'à ce que le contenu soit chargé en donnant le même effet qu'un préchargeur. Il n'a pas besoin d'être techniquement un préchargeur, il suffit de donner l'illusion que la page principale se charge dans l'ordre en arrière-plan, invisible par l'utilisateur, puis affiche une page bien chargée quand elle est prête. – Karlgoldstraw

m'a également aidé !! :) – KillABug

ce jQuery plugin pourrait aider.

Source

2010-11-21 23:36:20

J'utilisé this plug-in pour mon site ... peut-être il est ok pour vous aussi ..

Source

2010-11-22 12:42:28

Vous pourriez truquer, avec quelque chose comme ça (pour l'exemple que je 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 + '%'); 
     }); 
});

Source

2011-11-10 22:16:00 Johnish

Il montre 'Uncaught ReferenceError: arrayOfImageUrls n'est pas défini' – w3debugger

Comment créer un préchargeur jQuery avec un compteur en pourcentage?

Répondre

Questions connexes