Est-il possible de charger une annonce javascript en dernier sur la page pour éviter les temps de chargement lents?

Question

Existe-t-il un moyen d'inclure une annonce javascript-chargée en dernier sur la page, mais de la positionner dans le contenu? L'objectif principal est d'éviter que l'annonce javascript ne ralentisse le chargement de la page, donc s'il existe d'autres méthodes pour y parvenir, n'hésitez pas à partager.

Answer 1

Il est defer attribute vous pouvez mettre des blocs de script pour différer son exécution jusqu'à ce que la page se termine le chargement.

<script src="myscript.js" type="text/javascript" defer> 
// blah blah 
</script> 

Je ne suis pas sûr de la recommandation générale à propos de l'utilisation de cet attribut.

EDIT: Comme @ David a fait remarquer, utilisez defer="defer" pour XHTML

Et vous pouvez toujours mettre le code à l'intérieur du window.onload événement afin qu'il exécute après le chargement des pages:

window.onload = function() { 
    // ad codes here 

}; 

Mais l'approche ultérieure peut poser quelques problèmes, vous pourriez vouloir le tester en premier.

Plus d'informations sur this blog post par Dean Edwards, le gars qui a écrit le fameux javascript packer.

---

EDIT: Si la taille du code d'annonce lui-même est le problème, vous pouvez toujours différer le chargement en combinant les méthodes ci-dessus avec injection de script via document.write:

function loadScript(src) { 
    document.write('<script src="' + src + '" type="text/javascript"></script>'); 
} 

Ainsi, le code résultant pourrait ressembler à quelque chose comme ceci:

<script type="text/javascript" defer> 

function loadScript(src) { 
    document.write('<script src="' + src + '" type="text/javascript"></script>'); 
} 

loadScript('http://ads.example.com/advertisements.js'); 

</script> 

Mais comme je l'ai dit, cela dépend du code d'annonce spécifique que vous obtenez aussi. En raison de la position document.write va écrire des choses à ne pas être l'emplacement que vous voulez. Certaines modifications pourraient être nécessaires.

Answer 2

function addLoadEvent(func) { 
     var oldonload = window.onload; 
     if (typeof window.onload != 'function') { 
     window.onload = func; 
     } else { 
     window.onload = function() { 
      oldonload(); 
      func(); 
     } 
     } 
    } 

Le code ci-dessus est un bon moyen d'ajouter un nouvel événement onload qui n'interfère pas avec votre javascript existant. Ensuite, vous pouvez ajouter un nouvel événement de chargement pour charger les publicités en utilisant le code ci-dessous.

addLoadEvent(function() { // call to loadScript() here }); 

Answer 3

Je place généralement la balise pour charger le script juste avant la balise de fin de corps. Donc, il charge à la fin de la page. Ceci ne donne aucune erreur de validation ou quoi que ce soit.