Recomiendo este complemento. Es increíble descargarlo desde http://demo.inwebson.com/download/jpreloader.zip , ver en acción aquí 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>

aquí están los enlaces a la nueva versión jpreloader 2.1 http://demo.inwebson.com/download/jpreloader-v2.zip http://www.inwebson.com/demo/jpreloader-v2/

Si quiere decir que desea mostrar el contenido solo cuando está completamente cargado, puede intentar seguir dos opciones:

1) envuelva todo el contenido dentro de una <div id="wrapper" style="display:none;"></div> y, al cargar el evento completo, muéstrelo así:

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

2) Si esto aún no resuelve su propósito, puede cargar una página vacía y obtener contenido usando ajax:

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

EDITAR: Usando el script queryLoader proporcionado por gayadesign pude lograr cierto éxito: D

Tuve que hacer algunos cambios en el archivo queryLoader.js de la línea 127 a la 151. El script modificado es el siguiente. Inténtalo tú mismo.

 $(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>"); }); } },

no puedes

Como dijo zzzzBov, no se sabe cuánto contenido habrá o qué tamaño tendrá ese contenido.

Podrías 'falsificarlo', con algo como esto (para el ejemplo, estoy usando imágenes):

 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 + '%'); }); });

Como mencioné, este no es un porcentaje VERDADERO de los sitios que se cargan, sino una estimación aproximada de las imágenes que se han cargado, asumiendo que cada imagen tiene aproximadamente el mismo tamaño.