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

Question

对我来说很奇怪，因为我正在更改在document.ready（）中运行的加载图像的宽度和高度。每次运行该函数时，图像的宽度和高度都不同。

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

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

这是代码段：

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

图像必须先加载，但文档尚未准备好-如果未缓存该图像。这就是为什么它在第一次加载页面时返回一个相当randowm的数字。

为了使其始终正确，请在$(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(){

  ...

  }
});

完整代码段：

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