在圖片預加載編碼的時候看到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加載完成后觸發的事件；