0
231
Vistas¿Cómo usar JS para obtener la altura de HTML img y establecerla como una variable?
En el siguiente fragmento, intento obtener la altura de cualquier imagen anidada dentro de una clase en particular. Una vez que se recopila la altura de la imagen, necesito almacenarla en una variable para usarla en otro lugar.
Los dos problemas que me encuentro son:
- La segunda imagen regresa como 0px
- Almacenar el resultado de la altura de la imagen dinámica como una variable
let getImgHeight = (()=> { let images = document.querySelectorAll('.wistia img'); images.forEach(image => console.log(`${image.clientHeight}px`)); })(); <div class="wistia"> <img src="https://media.moddb.com/images/members/5/4550/4549205/duck.jpg" alt=""> <img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg" alt=""> </div>3 Respuestas
Responde la pregunta0
Obtiene cero porque verifica la altura de la imagen antes de cargarla. Puede verificarlo fácilmente si envuelve su función en un tiempo de espera prolongado.
El mejor enfoque es esperar a que se carguen todas las imágenes (ignorando las que ya están cargadas) y luego obtener su altura. Aquí hay un ejemplo a continuación:
let getImgHeight = (()=> { let images = document.querySelectorAll('.wistia img'); Promise.all(Array.from(images) .filter(img => !img.complete) .map(img => new Promise(resolve => { img.onload = img.onerror = resolve; }) ) ).then(() => { images.forEach(image => console.log(`${image.clientHeight}px`)); }); })(); <div class="wistia"> <img src="https://media.moddb.com/images/members/5/4550/4549205/duck.jpg" alt=""> <img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg" alt=""> </div>ACTUALIZAR 1 Todo el tiempo que quieras
para establecer la altura del contenedor principal
Sugeriría reescribir su código de la siguiente manera:
const images = document.querySelectorAll('.wistia img'); for (const image of Array.from(images)) { if (image.complete) { image.parentElement.style.height = image.clientHeight + 'px'; } else { image.onload = () => { image.parentElement.style.height = image.clientHeight + 'px'; } } } <div class="wistia"> <img src="https://media.moddb.com/images/members/5/4550/4549205/duck.jpg" alt=""> </div>0
Lo más probable es que esté tratando de obtener la altura de una imagen que no ha terminado de cargarse. La mejor manera de lidiar con eso es usar el detector de eventos de load . Luego puede almacenar la altura como un data-attribute que es una forma de convertirla en una variable dinámica.
document.addEventListener('DOMContentLoaded', () => { let images = document.querySelectorAll('.wistia img'); images.forEach(image => { image.addEventListener('load', e => { e.target.setAttribute('data-height', `${image.clientHeight}px`) console.log(`${e.target.clientHeight}px`); if (document.querySelectorAll('.wistia img[data-height]').length === images.length) { console.log("ALL IMAGES LOADED"); } }); }); }); <div class="wistia"> <img src="https://media.moddb.com/images/members/5/4550/4549205/duck.jpg" alt=""> <img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg" alt=""> </div>0
Probé tu código en JSFiddle y funcionó como se esperaba. Compruebe la versión de jQuery que está utilizando.
