Question

当我预先在html中设置图像的来源时，我能够获得原始的宽度和高度。如果我使用javascript / jquery设置图像的来源，则无法获得原始的宽度和高度。为什么会这样，我该如何解决？

jQuery(document).ready(function() { 
 	var originalWidth = $('#test').prop('naturalWidth');
  var originalHeight = $('#test').prop('naturalHeight');
  console.log(originalWidth + " x " + originalHeight);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <img id="test" src="https://www.gstatic.com/webp/gallery3/2.png">
</div>

以上方法有效，但我想使用javascript添加源图像。但是，当我尝试这样做时，它不起作用。

jQuery(document).ready(function() {
  $('#test').attr('src', 'https://www.gstatic.com/webp/gallery3/2.png'); 
    var originalWidth = $('#test').prop('naturalWidth');
    var originalHeight = $('#test').prop('naturalHeight');
    console.log(originalWidth + " x " + originalHeight);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div>
      <img id="test">
    </div>

如您所见，与先前的代码段不同，它返回值0和0。为什么？以及我该如何解决？

Answer 1

因为代码太快并且当您尝试访问属性时图像尚未加载

在更改src之前添加负载处理程序

$(function() {
  $('#test').on("load", function() {
    var originalWidth = $('#test').prop('naturalWidth');
    var originalHeight = $('#test').prop('naturalHeight');
    console.log(originalWidth + " x " + originalHeight);
  })
  $('#test').attr('src', 'https://www.gstatic.com/webp/gallery3/2.png');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <img id="test">
</div>

我正在使用Jquery添加src属性，但其工作方式有所不同。为什么？

1 个答案: