web-dev-qa-db-fra.com

jQuery.ready () écouteur d'événement équivalent sur les éléments?

J'utilise la bibliothèque JavaScript jQuery. J'aime l'écouteur d'événements prêt sur $(document) qui se déclenche lorsque le DOM est configuré.

(Assez similaire à .onload mais sans sources externes)

Je le trouverais très utile, s'il y avait un écouteur d'événement qui a un comportement très similaire à celui-ci, mais qui se déclenche lorsqu'un élément est complètement chargé. (par exemple: image, une div avec un contenu texte extrêmement long, par exemple)

J'apprécierais les deux méthodes jQuery ou JavaScript.

javascriptjquerydomonloaddocument-ready
19
Steven Palinkas

Aucun événement n'est déclenché lorsqu'un élément DOM arbitraire tel qu'un <div> Devient prêt. Les images ont leur propre événement load pour vous dire quand les données d'image ont été chargées et ont été rendues et quelques autres types spéciaux d'éléments ont un événement. Mais, les éléments DOM normaux n'ont pas un tel événement.

Si vous voulez que le code javascript soit exécuté dès qu'un élément DOM arbitraire est prêt, la seule façon de le faire est de placer un appel de fonction dans un script en ligne juste après cet élément DOM. À ce stade, cet élément DOM sera prêt, mais le reste du DOM par la suite ne sera peut-être pas encore prêt. Sinon, le script peut être placé à la fin du document ou le script peut être déclenché lorsque tout le document est prêt.

Voici les événements de chargement existants exprimés sous forme jQuery (ceux-ci peuvent également être effectués en JS ordinaire):

// when a particular image has finished loading the image data
$("#myImage").load(fn);

// when all elements in the document are loaded and ready for manipulation
$(document).ready(fn);

// when the DOM and all dynamically loaded resources such as images are ready
$(window).load(fn);

Dans jQuery, vous pouvez également charger dynamiquement du contenu et être averti lorsque ce contenu a été chargé à l'aide de la méthode .load() comme ceci:

$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

En interne, cela ne fait qu'un appel ajax pour récupérer les données, puis appelle le rappel après que les données ont été récupérées par ajax puis insérées dans le document. Ce n'est pas un événement natif.

Si vous avez du code qui charge dynamiquement des éléments dans le DOM et que vous voulez savoir quand ces éléments DOM sont présents, alors la meilleure façon de savoir quand ils sont prêts est d'avoir le code qui les ajoute au DOM pour créer une sorte d'événement pour vous dire quand il est prêt. Cela évite de gaspiller la batterie en essayant de savoir si l'élément est maintenant dans le DOM.

Il est également possible d'utiliser DOM MutationObserver pour voir quand des types spécifiques de changements ont été apportés au DOM.

18
jfriend00

Tous les éléments (y compris div et img) sont prêts dès que DOMReady se déclenche - c'est ce que cela signifie.

Cependant, vous pouvez utiliser l'événement load() pour exécuter du code lorsqu'une balise img a entièrement chargé l'image dans son attribut src:

$('img').load(function() {
   console.log('image loaded');
});
4
Rory McCrossan

jQuery ne l'a pas, mais nous pouvons créer notre propre onDomElementIsReady, Tools: jQuery, ES6, Promise et Interval (je suis paresseux, mais vous pouvez avoir l'idée)

Nous attendrons que l'élément existe sur le DOM et dès que disponible, nous résoudrons le résultat promise.

  const onDomElementIsReady = (elementToWatch)=> {
    //create promise
    return new Promise((res, rej)=> {
      let idInterval = setInterval(()=> {
        //keep waiting until the element exist
        if($(elementToWatch).length > 0) {
          clearInterval(idInterval); //remove the interval
          res($(elementToWatch)); //resolve the promise             
        }
      },100);
    });
  };


//how to use it?
onDomElementIsReady(".myElement").then(element => { 
                          //use jQuery element
                   });

REMARQUE: pour améliorer cela, nous devons ajouter un minuteur qui reject la promesse si l'élément DOM n'existe jamais.

2
ncubica