[JavaScript] jQuery attente du chargement DOM

Publié le 06/01/2020 • Actualisé le 06/01/2020

C'est un snippet JavaScript classique que nous avons tous utilisé au moins une fois. Il y a plusieurs manières d'arriver au même résultat, mais le code suivant est le plus lisible selon moi. Pour ceux qui se savent pas, quelques explications. Le code contenu dans ce bloc sera exécuté uniquement une fois le DOM (Document Object Model) de la page chargé (tout le contenu n'aura pas forcément encore été charge, comme les images). Accédez au lien Stackoverflow ci-dessous pour avoir des informations complémentaires. Vous pouvez ouvrir votre console JavaScript afin de vérifier que les messages de debug sont bien affichés. Veuillez noter que même si je trouve la première syntaxe plus lisible, celle recommandée à partir de jQuery3 est la dernière affichée ici : toutes les autres étant désormais dépréciées.

---

/* global $ */
/**
 * J'utilise un module JavaScript afin d'isoler chaque snippet dans un fichier.
 * C'est en fait un mixin Vue.js. Utilisez le code appelé par la fonction mounted()
 * ou snippetXX().
 *
 * Open your JavaScript console to check the console.log() calls.
 */
export default {
  methods: {
    snippet66 () {
      $(document).ready(function () {
        console.log('DOM is ready!')
      })

      $(function () {
        console.log('Recommanded syntax for jQuery3')
      })
      // That's it! 😁
    }
  },
  mounted () {
    if (this.isArticle(66)) {
      this.snippet66()
    }
  }
}

 Plus sur Stackoverflow   Lire la doc  Snippet aléatoire

  Travaillez avec moi !

---