0

I have the following javascript/jquery function that on click of a button it fills the div with id=test with an image.

document.querySelector('div#test').innerHTML = "<div class='position-relative slotpar'><div class='position-absolute'><img src='./Images/my-poster/slot.png' class='slotimg'></div></div>";

Right after in the same function I have the following code that reads the hight of the img element in the divs and passes it to the position-relativ div.

$(".slotpar").height($(".slotimg").height());

The function is not working properly though and I believe that the problem is that this code that passes the hight to the relative div does not wait for the document.querySelector('div#test').innerHTML to properly load the html and the images. I have tried using a timeout of 1 second and it works so I am prety sure the the problem is the one I mentioned.

Is there a way to wait for the html and the image to be completly loaded on click and then take pass the hight of the image to the relative div?

Please help me

SuzieKay
  • 1
  • 4
  • Similar to https://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript. The important thing is to wait for the image to load. – James Feb 01 '21 at 20:13
  • The HTML is put in immediately, but you need to allow the browser time to render it. Especially the image needs time to download or be fetched from cache. Use an `onLoad` handler on the image to continue. – Niet the Dark Absol Feb 01 '21 at 20:13
  • I tried giving the image id=book and tried this code but it did not work $( "#book" ).load(function() { $(".slotpar").height($(".slotimg").height()); }); – SuzieKay Feb 02 '21 at 10:41

0 Answers0