如何在JavaScript中获取动态加载图片的宽度和高度？

Question

我正在使用JavaScript动态地展示一些图片。我需要获取图像的高度和宽度。我使用“naturalWidth”和“naturalHeight”来获取宽度和高度。第一次加载时，我能够获取高度和宽度，但几分钟后我获取到的值是0。

HTML：

<div class="col-md-8" id="view_port_img" style="text-align: center;">
</div>

JAVASCRIPT

let img_div = 
    <img id="view_img_0" class="pointer micro_otpt view_port_img" src="https://picsum.photos/id/877/200/300" alt="user"></img>; 
    $('#view_port_img').html(img_div);
    var myImg = document.querySelector("#view_img_0");
    var imgWidth = myImg.naturalWidth;
    var imgHeight = myImg.naturalHeight;

在初始加载时，我可以获取高度和宽度，但过几分钟后，我获取到的值是0。 有人有解决方案吗？

- Sweta Sharma

---

如果未提供宽度和高度属性，则您的选择是打开文件并从文件本身确定宽度和高度，这意味着您必须根据其类型读取格式，如png、bmp、gif等。没有任何魔法可以为您完成此操作，您无法在客户端执行此操作，客户端JavaScript无法访问该文件。 - SPlatten

Answer 1

实际上，您正在尝试获取尚未在DOM中加载的图像的图像大小。您必须检查图像是否已在DOM中加载，可以通过使用image on load函数或document ready来完成。试试这个方法：

//var myImg = document.querySelector("#view_img_0");
function append_image() {

  let img_div =
    '<img id="view_img_0" class="pointer micro_otpt view_port_img" src="https://picsum.photos/id/877/200/300" alt="user">';
  $('#view_port_img').html(img_div);

}
append_image();

$(document).ready(function() {

// Your way
var myImg = document.querySelector("#view_img_0");
    var imgWidth = myImg.naturalWidth;
    var imgHeight = myImg.naturalHeight;
    console.log(imgWidth);
     console.log(imgHeight);
     
     //This also works
  console.log($('#view_img_0').width())
  console.log($('#view_img_0').height())

})

// Detect IF Image is loaded

$("#view_img_0")
    .on('load', function() { console.log("On Load",$('#view_img_0').width()); })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-8" id="view_port_img" style="text-align: center;">
</div>

- Shubham Dixit

---

但是 $(document).ready 只能在加载时起作用。如果我要在单击按钮时加载图像，那怎么办？那时我该如何获取图像的高度和宽度？ - Sweta Sharma

更新了我的回答，你可以运行 image.load() 函数。 - Shubham Dixit