Cómo saber cuándo un elemento DOM se mueve o se redimensiona

Question

Me gustaría saber si hay un evento DOM para escuchar que me dice cuando un elemento DOM se mueve o se cambia de tamaño en la página. No estoy hablando de elementos que se arrastran/caen. Un ejemplo es si tengo una lista de tres elementos en una página, y uso JS para eliminar uno de los dos primeros elementos de la lista de la página (u ocultarlo o lo que sea), me gustaría adjuntar un controlador para ejecutar cuando el tercer elemento de la lista se mueve hacia arriba en la página.

Estoy usando jQuery, por lo que las respuestas simples de javascript o jQuery son aceptables.

Quizás no haya eventos de movimiento/posición/cambio de tamaño en el nivel del elemento, así que si hay un evento de nivel de página/documento que me dirá que la página fue repintada y puedo verificar si necesito volver a llamar a una función ?

Antecedentes

puse un div transparente sobre un elemento mientras se realiza una llamada de servicio web para eliminar ese elemento. Como necesito posicionar absolutamente ese div superpuesto, quiero que rastree el elemento que cubre inicialmente. En efecto, lo ancla al elemento base.

Answer 1

No se puede obtener una devolución de llamada para el movimiento/cambio de tamaño del elemento en general; tendrías que estar constantemente revisando las dimensiones en un poller de intervalo, lo que lo haría un poco menos receptivo. Puede mejorar esto llamando al verificador en un evento de ventana resize también (y scroll si se trata de desbordamiento o posicionamiento fijo. También puede agregar detectores de eventos de mutación DOM para informarse cuando los elementos se eliminan del árbol de documentos, pero esto no el trabajo en todos los navegadores.

no se puede hacer una superposición con CSS sin formato? por ejemplo. position: relative poner en el elemento que se ha oscurecido, a continuación, añadir la superposición en su interior, con la siguiente?

position: absolute; 
z-index: 10; 
left: 0; 
top: 0; 
width: 100%; 
height: 100%; 
opacity: 0.5; 

Answer 2

There's a (Ben Alman) plugin for that.^TM

Este es un buen complemento, aunque se sugiere emplear con moderación (es decir, no en demasiados elementos), con el fin de mantener la cantidad de sondeo hacia abajo.

Answer 3

I No creo que esta solución sea relevante después de tanto tiempo, pero existe una excelente solución de navegador basada en los eventos de desbordamiento y desbordamiento presentados here

Para activar nuestra magia escucha de cambio de tamaño, se inyecta un elemento de objeto en el elemento objetivo, establecer una lista de estilos especiales para ocultarlo de la vista, y supervisar si se produce cambio de tamaño - que actúa como un disparador para alertarnos cuando el elemento objetivo padre se redimensiona.

El contenido del elemento <object> tiene un evento nativo resize, solo como una ventana.