javascript - 设置 src 属性后如何在不重新加载页面的情况下获取图像宽度

Question

我有一个函数，如果我将图像源传递给它，它应该修改 $("#image") 元素的 src 属性，当我单击不在表单内的按钮时调用此函数（这意味着该页面未重新加载）

function modify_image(image_src){
   $("#image").attr("src", image_src);
}

在他的src更改后，我如何获得此图像的宽度？

Answer 1

加载图像是异步的，因此您必须等到它加载后才能获取宽度：

function modify_image(image_src){
   $("#image").on('load', function() {
       var width = this.width;
   })
   .attr("src", image_src)
   .each(function() {
        if (this.complete) $(this).trigger('load');
   });
}

在附加事件处理程序后始终更改源，对于缓存的图像，您必须检查属性并自己触发事件。onloadthis.completeonload

Answer 2

图片更新后会触发 load 事件：

$("#image").attr("src", image_src)
    .load(function () {
      $(this).width(); // the new image width
    })

Answer 3

这是我的味道：

    function modify_image(image_src){
       $("#image").attr("src", image_src).load(function () {
            console.log($(this).width());
        });
    }

Answer 4

您可以使用加载功能

function modify_image(image_src){
   var img = new Image();
   img.src = image_src;
   img.onload = function () { 
       var width = img.width; 
    };
   $("#image").attr("src", img.src);
}

在加载函数中，您可以获取其属性，例如高度