javascript - 为什么动态加载图片总是取不到宽高？？

Question

我想写一个图片预览的功能，主要是点击页面一个小图片，然后在背景是黑色的蒙版下根据图片宽高全屏居中显示。但是出现有很大的概率取不到图片宽高，导致黑色蒙版下什么都没有。
我查了资料说是图片没加载完之前取不到。我也上网查了一下两种方法，可是并没有用
这是我要添加图片的代码

    var node = $( '<img src="' + picUrl + '" alt="图片" class="yulan-image" id="yulan-image">');
    $('body').append(node);

接下来是我在网上找的两种解决方案
1、

    var img = new Image();
    img.src = picUrl;//事先准备好的图片地址
    while(true) {
        console.log(img.complete);
        if(img.complete) {
            console.log('进来while了');
            $thisYulan.changeSize(); //调用调整显示图片位置的函数
            break;             
        }       
    }

2、

    $('body').load(node,function() {
            console.log('进来了');
            $thisYulan.changeSize(); 
    });

3、

    var img = document.getElementById('yulan-image');
    img.onload = function() {
        $thisYulan.changeSize();
        console.log('终于进来了');
    };
这三种方法只有第三种能调用 $thisYulan.changeSize()函数，为什么前两种不行呢？谁能帮忙告诉我一下

Answer 1

用死循环也是醉了。。。

$('<img />')
    .attr('src', picUrl)
    .attr('id', 'preview-image') //yulan-image就别用啦