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

How i can get image width after set src attribute without reload page

本文关键字：src 设置 情况下 属性 图像 获取 新加载 加载      更新时间：2023-09-26

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

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

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

加载

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

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 事件处理程序后更改源，对于缓存的图像，必须检查 this.complete 属性并自行触发onload事件。

加载事件将在映像更新时触发：

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

您可以使用加载函数

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

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

这是我的口味：

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