How to refresh offsetHeight of div after changing img src on child using pure javascript?

Question

I need to change an image in a div and then immediately centre it on the screen by calculating its height and width and then setting its left and top values. But when I change the img src and then try to get the div's offsetHeight and clientHeight, both the values are wrong. Strangely the offsetWidth and clientWidth values are correct.

Is there a way to refresh the div and get the correct value?

Edit: It appears that changing the image src makes everything after that not work. The change to the onclick event imageObj.onclick = function() {contractImageView(imageId);}; isn't working now either. If I comment out the if statement it all starts working again.

Below is the code...

   // Get the page dimensions
   var pageBody = document.getElementById(currentBody);
   // If you couldn't get the page body, abort.
   if (!pageBody) {
      return;
   }

   var pageBodyHeight = window.innerHeight;
   var pageBodyWidth = pageBody.offsetWidth;
   var imageDiv = document.getElementById(imageId);
   var imageObj = imageDiv.children[0];
   var paraObj = imageDiv.children[1];
   // If you can't get the div or its image, then abort.
   if (!imageDiv || !imageObj) {
      return;
   }
   // Check whether the image has been loaded yet, and load if needed
   if (imageObj.src.indexOf('lazy_placeholder.gif') !== -1) {
      for (item in photoLazyData) {
         if (item === imageDiv.parentElement.id) {
            imageObj.src = photoLazyData[item][imageDiv.id];
         }
      }
   }
   // Change the images class.
   imageDiv.className = 'active_design_div';
   imageDiv.style.visibility = 'visible';
   imageDiv.style.opacity = 1;
   // Set the objects new onclick method to collapse the image
   imageObj.onclick = function() {contractImageView(imageId);};
   // Calculate the right size
   imageDiv.style.maxHeight = pageBodyHeight + 'px';
   imageDiv.style.maxWidth = pageBodyWidth  + 'px';
   imageObj.style.maxHeight = pageBodyHeight + 'px';
   imageObj.style.maxWidth = pageBodyWidth  + 'px';
   // Calculate the margins.
   var imageDivWidth = imageDiv.offsetWidth || imageDiv.clientWidth;
   // ## THIS IS WRONG IF THE ABOVE IF STATEMENT CHANGES THE SRC ##
   var imageDivHeight = imageDiv.offsetHeight || imageDiv.clientHeight; 
   console.log(imageDiv.offsetHeight + ' : ' + imageDiv.clientHeight);
   console.log(imageDiv.offsetWidth + ' : ' + imageDiv.clientWidth);
   var leftOffset = (pageBodyWidth - imageDivWidth) / 2;
   var topOffset = (pageBodyHeight - imageDivHeight) /2;
   // Adjust styling to make the div visible and centred.
   imageDiv.style.left = String(leftOffset) + 'px';
   imageDiv.style.top = String(topOffset) + 'px';

   currentId = imageId;
   toggleBlackDiv();

Edit: I got this working in the end using Joonas89's answer. I basically moved the if statement that changes the src value to another function that is called prior to the one above. This solved the onclick problem mentioned above. I then changed the divs left/top from calculated values to 50% as detailed by Joonas89 (but on the container div rather than the img element), along with the new transform property. The div and img already had a position value of fixed so didn't need to change that.

Answer 1

Are you sure u want to calculate top and left positions? Wouldent it be better to add a class like this, that always centers it

.parentDiv{
   position: relative;
 }
.imageElement{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }