Du bon usage du chargement des scripts dans une page HTML
Bonjour,
Je débute en javascript. Jusque là je ne faisais que des petits trucs simples, mais là j'ai besoin de faire les choses correctement, et je suis un peu perdu avec les différentes façons d'inclure du javascript dans une page HTML.
En gros, l'exemple c'est une carte google map. Donc j'ai deux scripts à inclure dans ma page :
- Le script de l'api google que j'inclus avec un <script src='http://maps.google.com/maps/api/js'></script>
- Mon script. Celui-ci étant très petit, je l'inclus en inline : <script> /*... Mon code Javascript min ici ...*/ </script>
Sachant que mon script contient essentiellement ça.
Code:
1
2
3
4
5
6
7
8
9
10
11
|
function initialize() {
// On vérifie que l'api google map est disponible
if ( (typeof google !== 'undefined') && (typeof google.maps !== 'undefined') ) {
// le code d'initialisation ici
} else {
return;
}
}
// execute initialize() une fois la page chargée
window.addEventListener('load', initialize); |
Maintenant, pour chacun de ces 2 scripts, je peux l'inclure soit dans le head, soit en plein milieu de la page là où j'en ai besoin, soit juste avant la fin du body. Si on ajoute à ça les defer et async que j'ai trouvés dans les FAQ google (mais dont le support n'est aparemment pas très répendu), ça fait beaucoup de possibilités.
Donc, quelle est la bonne façon de faire pour :
- respecter les usages habituels,
- ne pas trop ralentir le rendu de la page,
- être sûr que tout est disponible au moment où l'événement load de la window est déclenché,
- que ça ne plante pas lamentablement si l'api google ne peut pas être chargée (exemple : la page est locale et il n'y a pas de connexion internet).
Merci d'avance pour votre aide.
Mat
