jQuery.ready() ascoltatore di eventi equivalente sugli elementi?

Question

Sto usando la libreria JavaScript jQuery. Mi piace l'ascoltatore di eventi pronto su $(document) che si attiva quando il DOM è impostato.

(molto simile a .onload)

avrei trovato molto utile, se ci fosse un wich evento ascoltatore ha un comportamento molto simile a questo, ma i fuochi quando un elemento è a pieno carico. (ad esempio: Picture, a Div, ad esempio)

Apprezzerei entrambi i metodi jQuery o JavaScript.

Answer 1

Non c'è evento generato quando un elemento DOM arbitraria, ad esempio un <div> diventa pronto. Le immagini hanno il loro evento load per dirti quando i dati dell'immagine sono stati caricati e sono stati renderizzati e alcuni altri tipi speciali di elementi hanno un evento. Ma gli elementi DOM regolari non hanno un tale evento.

Se si desidera che il codice javascript venga eseguito non appena un elemento DOM arbitrario è pronto, l'unico modo per farlo è inserire una chiamata di funzione in uno script in linea subito dopo quell'elemento DOM. A quel punto, l'elemento DOM sarà pronto, ma il resto del DOM potrebbe non essere ancora pronto. In caso contrario, lo script può essere inserito alla fine del documento o lo script può essere attivato quando l'intero documento è pronto.

Ecco gli eventi esistenti di carico espresse in forma jQuery (questi può essere fatto in pianura JS troppo):

// 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); 

In jQuery, è anche possibile caricare dinamicamente i contenuti e una notifica quando questo contenuto è stato caricato mediante il metodo .load() simili:

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

Internamente, questo non solo una chiamata AJAX per recuperare i dati e poi chiama la callback dopo i dati sono stati recuperati da ajax e poi inserito nel documento. Non è un evento nativo.

---

Se si dispone di un codice che viene dinamicamente caricando gli elementi per il DOM e volete sapere quando questi elementi DOM sono presenti, quindi il modo migliore per sapere quando sono pronti è quello di avere il codice che aggiunge loro al DOM creano una sorta di evento per dirti quando è pronto. Questo evita che la batteria sprechi i sondaggi cercando di scoprire se l'elemento si trova ora nel DOM.

È anche possibile utilizzare DOM MutationObserver per verificare quando al DOM sono stati apportati tipi specifici di modifiche.

Answer 2

Tutti gli elementi (incluso div e img) sono pronti non appena DOMReady si accende - questo è ciò che significa.

Tuttavia, è possibile utilizzare l'evento load() per eseguire del codice quando un tag img ha completamente caricato l'immagine nel suo src attributo:

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

Answer 3

jQuery non ce l'hanno, ma possiamo creare i nostri onDomElementIsReady, Strumenti: jQuery, ES6, Promise e Interval (sono pigro, ma è possibile ottenere l'idea)

Aspetteremo fino a quando il elemento esisteva sul DOM e non appena disponibile risolviamo il risultato 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 
        }); 

NOTA: Per migliorare questo dobbiamo aggiungere un timer che reject la promessa se l'elemento DOM non esiste mai.