問題描述
今天使用javascript改變圖片的src，發現了倆個問題：
1.改變圖片的src後，width和height還是原width和height。
2.javascript更新元素後，瀏覽器需要時間加載。
首先上代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascipt更新圖片</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
function normal_change() {
$("#img_have_height").attr("src", "img/open.jpg");
$("#img_no_have").attr("src", "img/open.jpg");
var img_have_height_height = $("#img_have_height").height();
var img_no_have = $("#img_no_have").height();
alert(img_have_height_height + " " + img_no_have);
}
function real_change() {
var height_before = document.getElementById("img_have_height").naturalHeight;
$("#img_have_height").attr("src", "img/open.jpg");
var height_after = document.getElementById("img_have_height").naturalHeight;
alert(height_before + " " + height_after);
}
function relay_go() {
$("#img_have_height").attr("src", "img/open.jpg");
setTimeout('$("#img_have_height").css("height", document.getElementById("img_have_height").naturalHeight);', 100);
}
</script>
</head>
<body>
<img id="img_have_height" src="img/imut.jpg" style="height: 134px;" />
<img id="img_no_have" src="img/imut.jpg" />
<br />
<button onclick="normal_change()">普通改變</button>
<button onclick="real_change()">圖片實際大小改變</button>
<button onclick="relay_go()">更新後執行</button>
</body>
</html>開始界面：這裏是我母校的倆個校徽，第一個有height屬性，第二個沒有。
點擊“普通改變“：可以看到alert已經打印出來，但是圖片還沒有改變，而且顯示兩個圖片的高度還是134px。
點擊“確定”：確定後，發現有height屬性高度和以前保持一致，而沒有的則是原圖片的寬高。
javascript改變圖片的src或者input的value等更新元素的操作需要一定加載時間
javascript改變圖片的src後，會繼承改變之前圖片設置的width和height屬性
關於第二點，W3C school中有提到 http://www.w3school.com.cn/jsref/prop_img_src.asp
對於對付第二點來講，在html5中有了新的方法 img.naturalHeight和img.naturalWidth 是獲取圖片源的實際高度和寬度。
不刷新頁面後，點擊“圖片實際大小改變”：134是改變前圖片源的實際大小，沒問題，爲什麼改變後的圖片源的實際大小是0？這是因爲改變後的圖片還沒有加載成功，就開始輸出了提示信息。
關於判斷圖片完全載入，這裏有個不錯的博客 http://www.cnblogs.com/snandy/p/3704938.html
我採用更加直接暴力的方法，而且通殺所有元素的載入問題，我加了一個延時，不過這樣也有BUG，如果網速等原因造成特別慢的載入，我的方法就不好使了。
點擊“更新後執行”
2017-12-6 重要更新
在測試環境中一直是沒問題的，但是今天想了一想覺得還是不可以採用上面那種暴力的辦法，萬一圖片太大或者是網速太慢都是問題。所以，在這裏鄭重道歉，我建議採用onload方法。
即：在img屬性中採用onload方法，然後在該方法中對圖片元素完全加載後的操作，修改後的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascipt更新圖片</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
function img_change() {
$("#img_no_load").attr("src", "../img/open.jpg");
$("#img_have_load").attr("src", "../img/open.jpg");
}
function img_onload() {
$("#img_have_load").attr("height", 300px);
}
</script>
</head>
<body>
<img id="img_no_load" src="../img/imut.jpg" />
<img id="img_have_load" onload="img_load()" src="../img/imut.jpg" />
<br />
<button onclick="img_change()">執行</button>
</body>
</html>可以看到，onload在改變圖片源後，onload會再次執行。所以，我們可以把對圖片尺寸的讀寫都放到這裏面。