Estoy en una situación en la que necesito esperar hasta que la imagen se cargue una vez que la imagen se carga, necesito obtener su altura calculada para poder configurar el selector de color amarillo en consecuencia.
Pregunta: según la altura calculada de la imagen, estoy configurando el selector de color amarillo. funciona con setTimeout() aleatoriamente pero no quiero ese enfoque.
let images = ['https://via.placeholder.com/150','https://via.placeholder.com/110/0000FF/808080%20?Text=Digital.com','https://via.placeholder.com/80/0000FF/808080%20?Text=Digital.com']; let image = `<img src="${images[Math.floor(Math.random()*images.length)]}"/>` document.getElementById('content').innerHTML = `<div class="box">${image}</div>`; //actual code let height = window.getComputedStyle(document.querySelector('.box'), null).getPropertyValue('height'); let imageWidth = window.getComputedStyle(document.querySelector('.box img'), null).getPropertyValue('width'); console.log('height',height,'width',imageWidth); wrapImage = `<div style="width:calc(${imageWidth} + 10px);height:calc(${height} + 10px);position:absolute;left:0;top:0;border:1px solid yellow;"></div>`; document.querySelector('.box').insertAdjacentHTML('beforeend',wrapImage); .box{ width:100%; height:auto; border:1px solid red; position:relative; } <div id="content"> </div> con setTimeout funciona pero no quiero ese enfoque , quiero callback de llamada o algún event una vez que el elemento esté listo
let images = ['https://via.placeholder.com/150','https://via.placeholder.com/110/0000FF/808080%20?Text=Digital.com','https://via.placeholder.com/80/0000FF/808080%20?Text=Digital.com']; let image = `<img src="${images[Math.floor(Math.random()*images.length)]}"/>` document.getElementById('content').innerHTML = `<div class="box">${image}</div>`; //actual code setTimeout(() => { let height = window.getComputedStyle(document.querySelector('.box'), null).getPropertyValue('height'); let imageWidth = window.getComputedStyle(document.querySelector('.box img'), null).getPropertyValue('width'); console.log('height',height,'width',imageWidth); wrapImage = `<div class="select" style="width:calc(${imageWidth} + 10px);height:${height};position:absolute;left:0;top:0;border:1px solid yellow;"></div>`; document.querySelector('.box').insertAdjacentHTML('beforeend',wrapImage); document.querySelector('.select').height = document.querySelector('.select').height + 10; console.log('after computed height and added 10px',window.getComputedStyle(document.querySelector('.box'), null).getPropertyValue('height')); },700); .box{ width:100%; height:auto; border:1px solid red; position:relative; } <div id="content"> </div>Por favor ayúdenme gracias de antemano!!!
La imagen no ha terminado de cargarse cuando recuperó el alto y el ancho. Para resolver esto, primero deberá esperar a que se carguen las imágenes y luego obtener su alto y ancho.
Escuche el evento de load de la ventana , que se activará cuando todos los recursos (incluidas las imágenes) se hayan cargado por completo:
let images = ['https://via.placeholder.com/150', 'https://via.placeholder.com/110/0000FF/808080%20?Text=Digital.com', 'https://via.placeholder.com/80/0000FF/808080%20?Text=Digital.com']; let image = `<img src="${images[Math.floor(Math.random()*images.length)]}"/>` document.getElementById('content').innerHTML = `<div class="box">${image}</div>`; //actual code window.addEventListener('load', function() { let height = window.getComputedStyle(document.querySelector('.box'), null).getPropertyValue('height'); let imageWidth = window.getComputedStyle(document.querySelector('.box img'), null).getPropertyValue('width'); console.log('height', height, 'width', imageWidth); wrapImage = `<div class="select" style="width:calc(${imageWidth} + 10px);height:${height};position:absolute;left:0;top:0;border:1px solid yellow;"></div>`; document.querySelector('.box').insertAdjacentHTML('beforeend', wrapImage); document.querySelector('.select').height = document.querySelector('.select').height + 10; console.log('after computed height and added 10px', window.getComputedStyle(document.querySelector('.box'), null).getPropertyValue('height')); }); .box { width: 100%; height: auto; border: 1px solid red; position: relative; } <div id="content"> </div>Para indicar la selección, puede usar la propiedad de contorno CSS. De esa forma, no tendrá que administrar las dimensiones de la selección usted mismo.
A continuación se muestra el código de demostración. Como desea hacerlo en varias imágenes, he agregado 3 imágenes. Y puede seleccionar varias imágenes.
function changeImages() { var images = document.getElementsByTagName('img'); for (var i = 0; i < images.length; i++) { images[i].src = "https://via.placeholder.com/" + Math.floor(Math.random() * 50 + 50).toString() + "/0a0a0a/ffffff"; } } function setClickEvents() { var images = document.getElementsByTagName('img'); for (var i = 0; i < images.length; i++) { images[i].addEventListener("click", function(event) { event.target.classList.toggle("selected"); });; } } function init() { document.getElementById('content').innerHTML = `<div id="box"></div>`; var box = document.getElementById('box'); var img = document.createElement("img"); img.classList.add("selected"); box.appendChild(img); box.appendChild(document.createElement("img")); box.appendChild(document.createElement("img")); setClickEvents(); changeImages(); } #content { padding: 15px; margin: 10px; } #box { width: 100%; height: 120px; border: 1px dotted red; position: relative; } img { margin: 15px; } /* use this class for marking selected elements */ .selected { outline: thick double #f7d205; outline-offset: 7px; } <!DOCTYPE html> <html lang="en"> <body onload="init()"> <button onclick="changeImages()">Change Images</button> <div id="content"></div> </body> </html>Haga clic en la imagen para alternar la selección.