JQuery中每次图像宽度和高度的不同结果

Question

这对我来说很奇怪，因为我正在更改在 document.ready() 中运行的加载图像的宽度和高度。 每次函数运行，图片的宽高都不一样。

我使用此代码获取加载图像的宽度和高度：

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

这是代码sn-p：

$(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>

另外，每个浏览器的结果都不同。

感谢您的任何帮助。

Answer 1

图像必须首先加载，这在文档准备就绪时还没有 - 如果它没有被缓存。这就是为什么它在第一次加载页面时返回一个相当随机的数字。

为了始终正确，请在 $(window).on('load', function() { ... }) 中运行函数。

编辑 - 我现在看到一些关于代码的棘手问题。窗口加载后您无法运行整个函数，因为附加 src 发生在函数本身内部。因此，最好将其取出并单独针对徽标的加载（.one() 是 .on() 的变体，会触发一次）：

$(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(){

  ...

  }
});

完整的sn-p：

$(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>