javascript - 无法获取图像的宽度

Question

我有我的html

<div id="image_preview_wrapper"><img id="preview_pic" src=""></div>

我用javascript来获取图片的大小

    $('.p_photo_image').click(function(){

    //just get the thumb 
    //image src and put it in the preview image src

    var clicked_image=$(this).attr('src'); 
    $('#preview_pic').attr('src',clicked_image);

    var pre_width=$('#preview_pic').width();
    var pre_height=$('#preview_pic').height();

    alert(pre_width);
    alert(pre_height);



    })

当我尝试提醒它时，它显示 0，或者如果我使用 $('#preview_pic').clientWidth，它显示未定义

Answer 1

你应该预加载图像并在图像的加载事件上获取它的高度和宽度

$('.p_photo_image').click(function () {
    //just get the thumb 
    //image src and put it in the preview image src
    var clicked_image = $(this).attr('src');

    //Preload image
    var img = new Image();
    img.src = clicked_image;
    img.onload = function () { 
        alert("height: " + this.height + " width:" + this.width);
        $('#preview_pic').attr('src', this.src);            
    };
})

DEMO