Préchargement avec JQuery OU Comportement de chargement de page avancé avec la barre de progression jQuery

Question

Nous avons une barre de progression jQuery. Existe-t-il un moyen pour que la barre de progression affiche le chargement d'une page HTML contenant PHP, CSS & JavaScript et tout cela?

Comme un préchargeur et lorsque la page a été téléchargée et affichée complètement, affichez-la.

Si ce n'est pas avec la barre de progression, peut-on faire un préchargement avec jQuery?

Answer 1

Une fois .. j'ai essayé de créer ceci, mais ce n'était pas joli. J'ai énuméré toutes les choses que j'ai besoin d'avoir sur une page et augmenté la barre de progression une par une comme elle a été chargée. C'était très énormément longue chaîne. Voici un échantillon de ce que j'ai fait.

$.getScript('js/lib/ui.js',function() { //Load the Jquery UI 
    //Call back function after the loading is complete 

    $("#progressinfo").html("Loading Widgets ..."); //Give the information 

    $.getScript('js/lib/widget.js',function() { // Load the jquery ui Widget 
    //Call back function after the loading is complete 

     $("#progressinfo").html("Loading Widgets: Progress Bar ..."); // Inform 

     $.getScript('js/lib/widgets/progressbar.js',function() { // Finally load the Jquery UI progressbar 
      //Call back function after the loading is complete 

      $("#progressbar").progressbar({ value: 5 }); // change the value of the UI informing the total amount of loadding completion            
      $("#progressinfo").html("Loading Widgets: some script ..."); //Inform of another script 

      $.getScript('somescript.js',function() { // Load another script 
      //Call back function after the loading is complete 

       $("#progressbar").progressbar({ value: 6 }); // change the value of the UI informing the total amount of loadding 

      }); 
     }); 
    });  
}); 

Answer 2

regarder ce que j'ai trouvé

jQuery Preloader et here is the demo

Answer 3

Easiest et encore de façon sexy:

cacher tout le contenu jusqu'à ce que le DOM est prêt, à l'exception de l'icône de chargement qui est centrée dans la page. Ensuite, lorsque les charges de contenu, supprimer l'icône de chargement:

quelque chose comme ceci:

   jQuery(function($){ 
         function preLoad() { 
          $("#content").addClass("hidden"); 
         } 

         function loaded() { 
          $("#content").removeClass("hidden"); 
          $('div#preLoader').css({display:'none'}).remove(); 
         } 

         preLoad(); 
         window.onload=loaded; 
       }); 

EDIT: Vous aurez besoin d'un ajax loader gif pour placer comme l'image d'arrière-plan #preLoader