javascript - vanilla - jQuery.ready() detector de eventos equivalente en elementos?

document.ready javascript w3schools

Question

Estoy usando la biblioteca jQuery JavaScript. Me gusta el detector de eventos listo en $(document) que se activa cuando se configura el DOM.

(Bastante similar a .onload pero sin fuentes externas)

Me resultaría muy útil si hubiera un detector de eventos que tenga un comportamiento muy similar a este, pero se dispare cuando un elemento está completamente cargado. (fe: Imagen, una Div con un contenido de texto extremadamente largo, tal)

Apreciaría los métodos jQuery o JavaScript.

Answer 1

No se dispara ningún evento cuando un elemento DOM arbitrario, como un <div> está listo. Las imágenes tienen su propio evento de load que le informa cuando los datos de la imagen se han cargado y se han renderizado y algunos otros tipos especiales de elementos tienen un evento. Pero, los elementos DOM regulares no tienen tal evento.

Si desea que el código javascript se ejecute tan pronto como esté listo un elemento DOM arbitrario, la única forma de hacerlo es colocar una llamada de función en un script en línea justo después de ese elemento DOM. En ese punto, ese elemento DOM estará listo, pero el resto del DOM posterior puede que aún no esté listo. De lo contrario, la secuencia de comandos se puede colocar al final del documento o la secuencia de comandos se puede activar cuando todo el documento está listo.

Aquí están los eventos de carga existentes expresados ​​en forma jQuery (estos también se pueden hacer en JS simple):

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

En jQuery, también puede cargar contenido dinámicamente y recibir una notificación cuando ese contenido se haya cargado utilizando el método .load() esta manera:

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

Internamente, esto solo hace una llamada ajax para recuperar los datos y luego llama a la devolución de llamada una vez que los datos han sido recuperados por ajax y luego insertados en el documento. No es un evento nativo.

Si tiene algún código que está cargando elementos dinámicamente en el DOM y quiere saber cuándo están presentes esos elementos del DOM, entonces la mejor manera de saber cuándo están listos es hacer que el código que los agrega al DOM cree algún tipo del evento para avisarte cuando esté listo. Esto evita que la batería desperdicie los esfuerzos de sondeo al intentar averiguar si el elemento está ahora en el DOM.

También es posible utilizar el DOM MutationObserver para ver cuándo se han realizado tipos específicos de cambios en el DOM.

Answer 2

Todos los elementos (incluidos div y img ) están listos tan pronto como se enciende DOMReady, eso es lo que significa.

Sin embargo, puede usar el evento load() para ejecutar algún código cuando una etiqueta img haya cargado completamente la imagen en su atributo src :

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

Answer 3

jQuery no lo tiene, pero podemos crear nuestro propio OnDomElementIsReady, Herramientas: jQuery , ES6 , Promise and Interval (soy perezoso, pero puedes tener la idea)

Esperaremos hasta que el elemento exista en el DOM y, tan pronto como esté disponible, resolveremos el resultado de la 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: Para mejorar esto, deberíamos agregar un temporizador que reject la promesa si el elemento DOM nunca existe.