img的complete跟onload（可有人懂最后的问题彩蛋）

在图片预加载编码的时候看到onload跟complete，思考，onload跟complete有什么区别？测试在chrome环境下。

动手实践，编了一小段简单的测试代码

document.getElementById('load').onclick = function() {
    var img = new Image();
    img.src="images/1-logo.png";
    if(img.complete) {
        console.log('dd');
    }
    img.onload = function() {
        console.log('ff')
    }
}

可以看到，第一次的时候，仅执行了onload，也就是我们看到的仅打印了‘ff'文字，而接下来的每次点击都会出现“dd”,"ff"，这是为什么呢？继续测试，改变位置：

document.getElementById('load').onclick = function() {
    var img = new Image();
    if(img.complete) {
        console.log('dd');
    }
    img.onload = function() {
        console.log('ff')
    }
    img.src="";
    
}

点击仅显示dd；

document.getElementById('load').onclick = function() {
    var img = new Image();
    if(img.complete) {
        console.log('dd');
    }
    img.onload = function() {
        console.log('ff')
    }
    img.src="images/1-logo.png";

}

dd，ff一起显示；

可见事件的执行与位置关系有关，看下onload的解释：

onload表示加载好，换言之，没有加载好不会执行；

再看complete，MDN上的解释：

无论src是否有值，成功与否，只要获取到image，就可以执行，而onload需要图片的加载完全，没有图片也就没有onload，这也就解释了为什么上面的一个案例一直显示“dd”，而没有执行显示“ff”；

那为什么第一个案例，第一次仅显示“ff”呢？Google了，没明白，有懂的人可以帮忙解释下么，在此先行谢过~