Affichage des articles dont le libellé est CDN. Afficher tous les articles
Affichage des articles dont le libellé est CDN. Afficher tous les articles

vendredi, février 05, 2010

Utiliser JQuery via le CDN de Google

La méthode recommandée par Google est celle de jsapi, elle fonctionne comme suit:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  // 1.4.1 est la version utilisée de JQuery
  google.load("jquery", "1.4.1");
  google.setOnLoadCallback(function() {
    // Placez votre code ici au lieu de $(document).ready()
  });
</script>

Cette méthode n'est pas la plus rapide, en effet, elle fait déjà charger l'application jsapi de Google (ce qui ralentit évidemment le tout)

Je vous recommande la solution suivante qui est également supportée par Google (1.4.1 étant la version de JQuery)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // ajoutez votre code ici
    });
</script>

Pour avoir plus d'informations à ce propos, vous pouvez lire l'excellent article 3 reasons why you should let Google host jQuery for you (en anglais)

Comment initialiser JQuery

Il existe principalement 2 méthodes pour initialiser JQuery:

  1. Localement
  2. Via CDN

Localement

Téléchargez la dernière version de JQuery (sélectionnez la version minimisée pour la production)

Placez le fichier dans le root de votre site (ou un sous-dossier nommé p.ex. « js »).

Créez un autre fichier nommé « actions.js » et insérez le code suivant: $(document).ready(function(){
// votre code ici
});

Dans votre code html, placez les tags suivants juste au dessus de la balise </body>: <script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/actions.js"></script>

Votre code devrait ressembler à ceci
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
</head>
<body>
Mon contenu ici
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/actions.js"></script>
</body>
</html>

Via CDN

CDN vient de l'anglais "Content Delivery Network" (voir la définition sur Wikipedia)

Il y a beaucoup d’avantages en faveur de l’utilisation d’un CDN externe:

  • Utilisez l'infrastructure des grands de l'internet
  • Le script est partagé entre plusieurs sites, et donc il est possible qu’il soit déjà dans le cache de votre visiteur

Conclusion: le chargement sera plus rapide

N'hésitez pas à me faire part d'autres CDN pour JQuery via les commentaires