img 的onload事件和complate事件区别

在图片预加载编码的时候看到onload跟complete，思考，onload跟complete有什么区别？测试在chrome环境下。
动手实践，编了一小段简单的测试代码
[javascript] view plain copy print?
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"，这是为什么呢？继续测试，改变位置：
[javascript] view plain copy print?
document.getElementById('load').onclick = function() {
var img = new Image();
if(img.complete) {
console.log('dd');
}
img.onload = function() {
console.log('ff')
}
img.src="";

}

点击仅显示dd；
[javascript] view plain copy print?
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”；

因为complet为加载对象及属性完成；
onload为img对象的src加载完成后触发的事件；