jQuery / Méthode / .resize() - Réagir aux changements de taille de la fenêtre

Utilisez $(window).on("resize", gestionnaire) pour réagir à la taille de la fenêtre. La forme courte .resize(gestionnaire) est obsolète depuis jQuery 3.3 ; préférez .on() dans le nouveau code. Si le traitement est nécessaire dès l’ouverture, appelez directement la fonction une fois.

Événement resize et forme courte

L’événement resize de jQuery inscrit un gestionnaire sur window. L’obsolescence de la forme .resize() ne concerne pas l’événement lui-même. Les versions complètes vérifiées 3.7.1 et 4.0.0 contiennent encore la forme courte ; .on("resize", …) rend inscription et nettoyage explicites.

L’événement natif window resize ne remonte pas vers les ancêtres. Modifier la largeur d’un div ne déclenche pas automatiquement resize sur ce div. Pour ses dimensions propres, étudiez ResizeObserver. Un redimensionnement peut envoyer plusieurs événements : ne dépendez pas d’un nombre précis d’appels.

Exemple complet avec initialisation et debounce

Enregistrez tout le code en UTF-8 dans resize-demo.html et ouvrez-le dans le navigateur. Internet est nécessaire pour le fichier jQuery officiel 4.0.0 du réseau de diffusion de contenu (CDN), sans installation. Les interactions ont été exécutées avec 3.7.1 et 4.0.0 dans Edge sous Windows en modifiant les dimensions de la zone visible.

Le debounce annule le minuteur précédent à chaque nouvelle notification et actualise 150ms après la dernière. La planification du navigateur peut retarder davantage l’exécution. Le mode narrow/wide utilise 600 pixels CSS comme seuil ; une requête média CSS contrôle la bordure.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Window resize with debounce and cleanup</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button { font: inherit; margin: 4px; max-width: 100%; }
    #sample { padding: 16px; background: #edf9f6; border: 1px solid teal; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
    @media (min-width: 600px) { #sample { border-width: 3px; } }
  </style>
</head>
<body>
  <h1>Observe window resize</h1>
  <button type="button" id="trigger">Trigger resize notification</button>
  <button type="button" id="stop">Stop listener</button>
  <button type="button" id="start">Start listener</button>
  <button type="button" id="reset">Reset counters</button>
  <div id="sample">Resize the browser or responsive preview.</div>
  <pre id="result" aria-live="polite"></pre>
  <script>
    $(function () {
      let timer = null, active = false, events = 0, renders = 0;
      function render() {
        renders++;
        const width = window.innerWidth;
        const height = window.innerHeight;
        $("#result").text(`viewport=${width} x ${height}\nmode=${width < 600 ? "narrow" : "wide"}\nlistener=${active ? "on" : "off"}\nresize events=${events}\nrenders=${renders}`);
      }
      function changed() {
        events++;
        clearTimeout(timer);
        timer = setTimeout(function () { timer = null; render(); }, 150);
      }
      function detach() {
        $(window).off("resize.windowLesson");
        clearTimeout(timer); timer = null; active = false;
      }
      function attach() {
        detach();
        $(window).on("resize.windowLesson", changed);
        active = true;
        render();
      }
      $("#trigger").on("click", function () { $(window).trigger("resize"); });
      $("#stop").on("click", function () { detach(); render(); });
      $("#start").on("click", attach);
      $("#reset").on("click", function () { detach(); events = 0; renders = 0; attach(); });
      attach();
    });
  </script>
</body>
</html>

Cette sortie initiale suppose une zone visible de 390×844 pixels CSS. Vos dimensions peuvent différer ; à partir de 600 de largeur, mode vaut wide. resize events=0 et renders=1 indiquent un premier appel direct.

viewport=390 x 844
mode=narrow
listener=on
resize events=0
renders=1

1. Modifiez la fenêtre ou l’aperçu adaptatif des outils de développement. Après l’arrêt, viewport doit afficher les dimensions finales. resize events compte les notifications ; renders les actualisations.
2. Trigger resize notification envoie seulement une notification. Les compteurs augmentent après le délai, mais les dimensions restent identiques.
3. Stop listener passe listener à off. Les redimensionnements suivants ne changent plus la sortie. Le minuteur en attente est également annulé.
4. Start listener mesure les dimensions actuelles. L’ancien gestionnaire est retiré avant inscription : plusieurs clics gardent un seul gestionnaire propre à cet exemple.
5. Reset counters rétablit zéro événement et une actualisation aux dimensions actuelles, puis reprend l’écoute. La fenêtre ne revient pas à 390×844.

Arrêter le traitement diffère de restaurer les dimensions réelles. Gardez la même taille et utilisez le bouton de notification pour comparer. Trois notifications synchrones ont produit trois événements et une actualisation différée lors de la vérification ; cela ne fixe pas le nombre des événements d’une manipulation réelle.

Éviter les doublons et annuler le travail différé

L’espace de noms resize.windowLesson identifie ce gestionnaire. .off("resize.windowLesson") le retire précisément, alors que .off("resize") retirerait aussi les autres gestionnaires. Plusieurs composants nécessitent des noms distincts et une gestion de leur durée de vie.

Retirer un gestionnaire n’annule pas un setTimeout déjà programmé. detach() appelle aussi clearTimeout(timer). attach() supprime l’ancienne inscription et le travail en attente avant de recommencer ; Reset réutilise ce chemin. Nettoyez événements et minuteurs ensemble lors du retrait d’un composant ou d’un changement de page.

Dans le code ancien, .resize(handler) inscrit un traitement, tandis que .resize() sans argument notifie. Cet extrait de console vérifie la forme courte sur un objet indépendant, sans changer la fenêtre ni les compteurs principaux. Employez les formes .on() et .trigger() présentées plus haut pour le nouveau code.

const $target = $({});
let calls = 0;
$target.resize(function () { calls++; });
$target.resize();
console.log(`legacy shorthand calls=${calls}`);
$target.off("resize");

legacy shorthand calls=1

Vérifier si resize convient au besoin

Les requêtes média CSS suffisent souvent pour des colonnes, couleurs ou bordures simples. Vérifiez cette possibilité avant de lire les largeurs et écrire les styles en boucle en JavaScript. Ici CSS gère la bordure et JavaScript affiche compteurs et état.

Le debounce traite la taille finale plutôt que chaque étape. Si une réaction continue est nécessaire, son délai volontaire peut gêner : définissez d’abord le moment attendu. Évitez les requêtes serveur lourdes à chaque événement et l’ajout permanent de sorties identiques au modèle objet du document (DOM).

Une barre latérale, une police ou du contenu peut redimensionner un élément sans changer la fenêtre. window resize ne détecte pas tout. Avec ResizeObserver, distinguez la boîte mesurée de la cible modifiée et évitez de modifier indéfiniment la taille observée dans le rappel. Les pixels CSS de la fenêtre ne sont pas non plus la résolution physique de l’écran.