javascript - 在js中更改img的来源并获得0的宽度？

Question

我目前正在尝试使用 jquery 设置图像 HTML 标记的来源，然后获取图像的高度和宽度。但是，当尝试使用以下代码执行此操作时，我得到的 width 为 0 并且与 height 相同:

$(document).ready(function() {
    
    $("#image").attr("src", "https://via.placeholder.com/600x160.png?text=Testing Image");
    console.log($("#image").width());
    
});

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

我正在尝试这样做是为了更改同一 HTML 标记的图像 src 并获得新的宽度和高度。

我发现这是由于图像未加载到 DOM 中，所以我尝试了一些我在互联网上找到的东西作为以下两个片段，但结果相同，宽度为 0，高度为 0:

$(document).ready(function() {
    
    $(`<img id='image' src='${"https://via.placeholder.com/600x160.png?text=Testing Image"}'>`).appendTo('#container');
    console.log($("#image").width());
    
});

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

$(document).ready(function() {
    
    let image = new Image();
    image.src = "https://via.placeholder.com/600x160.png?text=Testing Image";
    image.id = "image";
    $('#container').append(image);
    console.log($("#image").width());
    
});

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

我不知道你是否能理解我的需求，但我非常感谢那里的帮助。

提前致谢。

Answer 1

您应该使用 load事件，以便等到图像加载并显示出来

见下面的片段:

使用 Jquery:

$(document).ready(function() {
    var $image = $("#image");
    $image.attr("src", "https://via.placeholder.com/600x160.png?text=Testing Image");
    $image.on("load", function() {
        console.log($(this).width(),"X",$(this).height());
    })
    
});

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

使用纯js:

    let image = new Image();
    image.src = "https://via.placeholder.com/600x160.png?text=Testing Image";
    image.id = "image";
    
    image.addEventListener("load", function(event) {
      console.log(this.width ,"x",this.height)
    });
    
    let container = document.getElementById("container")
    
    container.appendChild(image);

<div id="container" ></div>