2013-04-08 1 views
2

Comme vous le savez probablement, Google PageSpeed Insights vous demande de reporter votre javascript.Solution ultime pour différer javascript et jquery après le chargement de la page

Google lui-même suggests a solution reporter votre code:

<script type="text/javascript"> 
    function downloadJSAtOnload() 
    { 
     var element = document.createElement("script"); 
     element.src = "deferredfunctions.js"; 
     document.body.appendChild(element); 
    } 
    if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); 
    else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); 
    else window.onload = downloadJSAtOnload; 
</script> 

Bien sûr, est une bonne solution, mais il est loin d'être les circonstances réelles (de nombreux scripts pour inclure, code à exécuter, etc ...)

Strating d'un exemple:

<html> 
    <head> 
    </head> 
    <body> 
     <script type='text/javascript' src='...'></script> 
     <script type='text/javascript' src='...'></script> 
     <script type='text/javascript' src='...'></script> 
     <script type='text/javascript'><!-- 
      // some code 
      $(document).ready(function(){ 
       // code to execute when the page is ready 
      }); 
     --></script> 
    </body> 
</html> 

la question est la suivante: Comment appliquer la suggestion de Google à l'exemple ci-dessus?

+0

étant donné que votre deuxième exemple nécessite que jquery soit chargé pour s'exécuter, vous ne gagneriez pas grand-chose. "charger quelques JS pour pouvoir différer le chargement de JS". –

+0

Vous avez raison Marc, mais Google PageSpeed ​​ne dit pas la même chose. Il continue à me montrer le conseil: "reporter l'exécution de JavaScript jusqu'au chargement de la page". Pensez-vous que je peux omettre cela? –

Répondre

0

L'exemple Google peut fonctionner pour plusieurs scripts si le downloadJSatOnload ajoute plusieurs éléments de script à la page, puis appelle le code que vous mettez normalement dans $(document).ready(function() { ... });. Ce code pourrait être appelé explicitement ou être le dernier fichier téléchargé.

+0

J'ai essayé d'appliquer cette solution. Tous les scripts jquery fonctionnent (diaporama, carte, validation de formulaire) mais j'ai l'erreur "Uncaught ReferenceError: $ is not defined". C'est comme si le bloc ready était exécuté avant tous les scripts, mais tout fonctionne de la même manière. Comment est-ce possible? –

+0

Dans IE8, il génère une erreur –

+0

Pouvez-vous modifier la question pour inclure le code que vous avez essayé? En outre, voir certaines des questions liées, ils sont très similaires à celui-ci et pourraient fournir quelques idées. –

Questions connexes