Different result for Image width and height each time in JQuery

Question

Its very weird for me, as I'm changing width and height of the loaded image which run in document.ready(). Every time the function runs,the image width and height is different.

I use this code for getting width and height for loaded image :

    var img = document.getElementById('imgLogo');
    var width = img.clientWidth;
    var height = img.clientHeight;

This is the code snippet:

$(document).ready(function() {
  SetLogo();
});

function SetLogo() {

  var src = 'https://www.gstatic.com/webp/gallery/3.sm.jpg';
  $('#imgLogo').attr("src", src);

  if (src == "") {

    $('#dvimg').addClass("hidden");
  } else {

    $('#dvimg').removeClass("hidden");

    var panel = document.getElementById('dvimg');
    var pwidth = panel.clientWidth;
    var pheigh = panel.clientHeight;

    var img = document.getElementById('imgLogo');
    alert("image w= " + $('#imgLogo').width() + " image H= " + $('#imgLogo').height());


    var ratio = img.clientWidth / img.clientHeight;

    if (img.clientWidth > pwidth) {
      alert('width > pwidth');
      $('#imgLogo').height(pwidth / ratio);
      $('#imgLogo').width(pwidth);

      $('#dvimg').css("padding-top", (pheigh - img.clientHeight) / 2);
      $('#dvimg').css("padding-left", 0);
    } else if (img.clientHeight > pheigh) {

      alert('height > pheigh');

      $('#imgLogo').height(pheigh);
      $('#imgLogo').width(pheigh * ratio);

      $('#dvimg').css("padding-left", (pwidth - img.clientWidth) / 2);

      $('#dvimg').css("padding-top", 0);
    } else {
      alert('else');
      $('#dvimg').css("padding-top", (pheigh - img.clientHeight) / 2);
      $('#dvimg').css("padding-left", (pwidth - img.clientWidth) / 2);

    }

    alert("image heigh after change : " + img.clientHeight + "image width after change : " + img.clientWidth);

  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvimg" class="col-md-12 panel mbl text-center" style="height: 300px; width: 400px;">
  <img id="imgLogo" src="images/blank.jpg" />
</div>

Also, the result is different in each browser.

Thank you in advanced for any help.

Answer 1

The image has to load first which is not yet the case on document ready - if the it isn't cached. That's why it's returning a rather randowm number the first time the page is loaded.

For it to always be correct, run the function inside a $(window).on('load', function() { ... }).

Edit - I see something tricky now about the code though. You can't run the whole function after the window loads because appending the src happens inside the function itself. So it's better to take it out and target the loading of the logo alone (.one() is a variation of .on() that fires a single time) :

$(document).ready(function() {

  var src = 'https://www.gstatic.com/webp/gallery/3.sm.jpg';
  $('#imgLogo').attr("src", src);

  $('#imgLogo').one('load', function() {SetLogo()});

  function SetLogo(){

  ...

  }
});

Full snippet:

$(document).ready(function() {

  var src = 'https://www.gstatic.com/webp/gallery/3.sm.jpg';
  $('#imgLogo').attr("src", src);

  $('#imgLogo').one('load', function() {
    SetLogo()
  });

  function SetLogo() {

    if (src == "") {

      $('#dvimg').addClass("hidden");
    } else {

      $('#dvimg').removeClass("hidden");

      var panel = document.getElementById('dvimg');
      var pwidth = panel.clientWidth;
      var pheigh = panel.clientHeight;

      var img = document.getElementById('imgLogo');
      alert("image w= " + $('#imgLogo').width() + " image H= " + $('#imgLogo').height());


      var ratio = img.clientWidth / img.clientHeight;

      if (img.clientWidth > pwidth) {
        alert('width > pwidth');
        $('#imgLogo').height(pwidth / ratio);
        $('#imgLogo').width(pwidth);

        $('#dvimg').css("padding-top", (pheigh - img.clientHeight) / 2);
        $('#dvimg').css("padding-left", 0);
      } else if (img.clientHeight > pheigh) {

        alert('height > pheigh');

        $('#imgLogo').height(pheigh);
        $('#imgLogo').width(pheigh * ratio);

        $('#dvimg').css("padding-left", (pwidth - img.clientWidth) / 2);

        $('#dvimg').css("padding-top", 0);
      } else {
        alert('else');
        $('#dvimg').css("padding-top", (pheigh - img.clientHeight) / 2);
        $('#dvimg').css("padding-left", (pwidth - img.clientWidth) / 2);

      }

      alert("image heigh after change : " + img.clientHeight + "image width after change : " + img.clientWidth);

    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvimg" class="col-md-12 panel mbl text-center" style="height: 300px; width: 400px;">
  <img id="imgLogo" src="images/blank.jpg" />
</div>