jquery-outerHeight(true)的值有誤問題解決辦法（chrome瀏覽器）
問題描述：
我想獲取一個容器元素的高度（包含margin+padding+height+border），容器中包含圖片，當我在chrome瀏覽器中除錯移動到容器元素上的時候，我通過Jquery中 $('element').outerHeight(true) 所獲取到的值並不是我想要的值，而是比我想要獲取到的值更小。 這個容器元素的樣式中包含容器本身的寬度width,position:relative和子元素裡position:absolute。在火狐瀏覽器（FireFox）中，jquey的outerHeight(true)的方法可以獲取到盒子容器的高度（margin+border+padding+height）；但是在chrome瀏覽器中卻怎麼也獲取不到正確的值。
原因：
如果容器中包含有圖片元素，如果圖片元素沒有能夠及時的載入完成，這個時候，計算的outerHeight(true)的值就會不包含圖片的值，所以獲取的到值會比你需要的值小。
解決辦法：
先判斷圖片載入完成，然後再計算容器的outerHeight(true)的值。
判斷圖片載入完成的方法：
JavaScript方法判斷單個元素：
通過指定圖片元素的onload方法，判斷圖片是否載入完成：
<img src="images/1.jpg" id="img" alt=""/> <script> document.getElementById("img").onload=function(){ console.log('圖片載入完成！'); } </script>
所有瀏覽器都顯示出了“loaded”，說明所有瀏覽器都支援img的load事件。
通過readystatechange事件判斷圖片是否載入完成：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>img - readystatechange event</title> </head> <body> <img id="img1"src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg"> <p id="p1">loading...</p> <script type="text/javascript"> img1.onreadystatechange =function() { if(img1.readyState=="complete"||img1.readyState=="loaded"){ p1.innerHTML ='readystatechange:loaded' } } </script> </body> </html>
readyState為complete和loaded則表明圖片已經載入完畢。測試IE6-IE10支援該事件，其它瀏覽器不支援。
通過complete判難圖片是否載入完成：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>img - complete attribute</title>
</head>
<body>
<img id="img1"src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
<p id="p1">loading...</p>
<script type="text/javascript">
functionimgLoad(img, callback) {
vartimer = setInterval(function() {
if(img.complete) {
callback(img)
clearInterval(timer)
}
}, 50)
}
imgLoad(img1,function() {
p1.innerHTML('載入完畢')
})
</script>
</body>
</html>輪詢不斷監測img的complete屬性，如果為true則表明圖片已經載入完畢，停止輪詢。該屬性所有瀏覽器都支援。
Jquery方法判斷多個img全部完成載入：
<script type="text/javascript">
$(function(){
$('.pic1').each(function() {
$(this).load(function(){
$(this).fadeIn();
});
});
});
</script>注意，不要在$(document).ready()裡繫結load事件。
這樣判斷圖片載入完成後，在通過jquery 的outerHeight(true),就可以獲取整個容器元素的高度啦
內容參考：https://stackoverflow.com/questions/10268892/outerheighttrue-gives-wrong-value
https://blog.csdn.net/zhuchunyan_aijia/article/details/52016962