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');
   });
}

始终在附加onload事件处理程序后更改源，对于缓存的图像，您必须检查{ {1}}属性并自行触发this.complete事件。

Answer 2

图像更新后会触发加载事件：

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

Answer 3

您可以使用加载功能

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);
}

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

Answer 4

这是我的口味：

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

如何在没有重新加载页面的情况下设置src属性后获得图像宽度

4 个答案: