No jQuery o similares
Los href que se almacenan en la variable link son imágenes que no se encuentran en el DOM
Quiero guardar los valores del alto y ancho de X número de imágenes de diferentes proporciones con un ciclo for, pero la manera en la que lo estoy haciendo no funciona (me genera ceros) ya que la imagen no ha terminado de cargar. Esto es lo que llevo:
var img = document.getElementsByClassName('post-image');
var link, w, h;
var margenes = [];
for(var i = 0; i < img.length; i++){
// La url de la imagen
link = img[i].parentElement.href;
// Agregar <img src="link"> al DOM, esto va dentro de un <div>
document.getElementById('thread').insertAdjacentHTML('afterbegin', '<div id="lightbox"><img id="lightbox-img" src="' + link + '"></div>');
// Obtener los valores de alto y ancho
var lightboxImg = document.getElementById('lightbox-img');
w = lightboxImg.width;
h = lightboxImg.height;
// Guardar una cadena de texto en el arreglo con los datos de alto y ancho
margenes.push("-" + h/2 + "px 0px 0px -" + w/2 + "px");
console.log(margenes[i]);
// Eliminar la imagen del DOM
document.getElementById('lightbox').parentNode.removeChild(document.getElementById('lightbox'));
}
La línea
console.log(margenes[i]);
me genera -0px 0px 0px -0px
Todo lo quiero guardar en el arreglo margenes ya que esa cadena la utilizo después para agregar CSS. Si existe una manera de guardar en las variables h y w los valores del alto y ancho antes de que cargue la imagen o de alguna otra manera que no requiera meter la imagen al DOM les pido que me lo hagan saber.
lightboxImg.clientWidth
. Para ser mas preciso, existen 3 propiedades,scrollWdith
clientWidth
y por ultimooffsetWidth
, las primeras dos propiedades te dan el tamaño del contenido del elemento y su padding (espacio entre el borde y el contenido) y la última propiedad te da lo mismo agregando el tamaño de los bordes. Ya te dieron una respuesta creando un objetoImage
pero creo que es válido que sepas esto.clientWidth
te da el contenido mas el padding de lo que es visible,offsetWidth
te da lo mismo mas los bordes y por últimoscrollWidth
te da el contenido completo del elemento incluyendo padding (sin considerar bordes), por ejemplo, si tenemos un elemento que es 600X600 en el que tenemos dentro un elemento que es 800X800,clientWidth
te retornara 600 mientras quescrollWidth
te retornara 800.