Question

我正在使用jQuery更改图片来源

var img = $("#image-holder img")
img.attr("src","uploads/image.jpg");

这时，如何获得图像的clientWidth和高度？我尝试过类似的方法

img.width()
img.clientWidth
img.width

但是其中一些不起作用，而其他一些仅返回0。

您有什么建议吗？

谢谢

Answer 1

您可能需要等到图像加载完成才能获得图像的大小。

var img = $("#image-holder img")
$("#image-holder img").load(function() {
  console.log(img.width);
});
img.attr("src","uploads/image.jpg");

Answer 2

您应该使用load事件获取图像宽度。

我为加载图像之前和之后创建一个示例。

var img = $("#image-holder img");
img.attr("src","https://www.w3schools.com/images/compatible_chrome.gif");
console.log('before load: ' + img.width());

var load = function(e){

   console.log('after load: ' + e.width);
};

var img = $("#image-holder img");
img.attr("src","https://www.w3schools.com/images/compatible_chrome.gif");
console.log('before load: ' + img.width());

var load = function(e){
   //alert(e.width);
   console.log('after load: ' + e.width);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="image-holder">
  <img src="" onload="load(this)"/>
<div>

Answer 3

您需要等待图像完成加载。

您可以将load（）方法绑定到新的Image上。

HTML：

<div id="image-holder">
    <!-- A 150x150 blue square -->
    <img src="https://via.placeholder.com/150/0000FF" />
</div>

Javascript：

// Function to load/ update the original image.
let loadImg = function(newSize) {

    // Grab a pointer to the current image
    let newImg = $("#image-holder > img")

    // Update the source to the new URL
    // This image will be of the requested size and red
    newImg.attr("src",'https://via.placeholder.com/'+newSize+'/ff0000');

    // Bind a load handler (might as well add an error handler also)
    newImg.bind({
        load: function() {
            alert('The new image is: '+newImg.width()+'x'+newImg.height());
        },
        error: function() {
            alert('There was an error loading the new image.');
        }
    });

};

// Load the new image (with a set size)...
loadImg(350);

工作示例：

https://jsfiddle.net/jjjjssssfidd/wpc3oxk0/4/

更改src属性后如何获取图像大小？

3 个答案: