Samedi, 04 Septembre 2010
Execution de requêtes AJAX avant le chargement du DOM
Vendredi, 30 Avril 2010 15:48
Grâce à modèle de code vous pouvez exécuter des requêtes AJAX en mode asynchrone avant le chargement du DOM.

Un exemple de code :

<html>
  <head>
    <script type="text/javascript" src="/jquery.js" />
    <script type="text/javascript">
      $(document).ready(function(){
        // make an ajax request once the dom is ready
        $.ajax({
          url: 'ajax.php',
            success: function(data) {
              for(var i in data) {
                $('.app-container').append('<div>'+data[i]+'</div>');
              }
            }
        });
      });
  </script>
</head>
<body class="app-container">
  // Perhaps a very large dom - which makes the page load slower
</body>
</html>
Le problème avec ce code est que la requête pour le contenu de la page n'est affiché que lorsque le DOM est chargé

A la place de l'appel $.ajax() dans la fonction dom ready, il faut juste essayer de wrapper la fonction callback qui s'exécute après le "sucess".

<html>
  <head>
    <script type="text/javascript" src="/jquery.js" />
    <script type="text/javascript">
      // make an ajax request right away
      $.ajax({
        url: 'ajax.php',
          success: function(data) {
            $(document).ready(function(){  //<-- Hey Guys check this out!
              for(var i in data) {
                $('.app-container').append('<div>'+data[i]+'</div>');
              };
            });
          }
        });
  </script>
</head>
<body class="app-container">
  // Perhaps a very large dom - which makes the page load slower
</body>
</html>

Cela devrait accélérer le temps de chargement de votre page. De mon expérience, il ne semble pas y avoir de problèmes de sécurité avec ce code. La fonction se déclenche immédiatement si votre événement domready est lancé.

Vous pouvez attribuer tous les définitions de fonctions et de variables alors que la page est en chargement, plutôt que par la suite. Tout ce que vous pouvez faire tout de suite de manière asynchrone sera bénéfique que d'attendre la fin du chargement de la page. Il existe quelques méthodes de faire cela en étant un peu mieux organisé, mais l'organisation n'est pas le sujet, voici donc un exemple simple de code que vous pouvez écrire à l'exécution dans la fonction dom ready.

(function($){  //<-- use a closure to protect your namespace and your `$`
  // This runs immediately
  $('a').live('click', function(e){
    alert('OKBYE!');
    return true;
  });

 // define functions outside of the dom ready
 function doSomething(input) {
    $('div.something').do(input);
    // you can even use functions that require the
    // dom inside of a defined function as long
    // as you don't call it until the dom is ready
    $('div.somethingelse').click(function(){
      console.log("I don't need no dom ready");
     });
  }

  // dom ready
  $(document).ready(function(){
    // Do stuff that requires the dom, and
    // use your functions from outside
    $('a.special').click(function(e){
      doSomething('special');
    });
    // yay!
  });
})(jQuery);
Suivant >