JS:关于JQ获取图片高度为0的问题记录

好久没有写PC的页面，今天写了一把，然后被一个小问题纠结了好久：JQ获取图片高度为0。
不多说，上代码：

<style>
    #box > img {
        margin-bottom: 20px;
        width: 100%;
    }
</style>

<div id="box">
    <img src="xxx" />
    <img src="xxx" />
    <img src="xxx" />
    <img src="xxx" />
    <img src="xxx" />
    ......
</div>

我的初衷很简单，就是获取#box的高度，当然，利用JQ的写法也很容易：

<script type="text/javascript">
    $(function() {
        .....
        var _boxH = $('#box').outerHeight();
        .....
    });
</script>

这样就可以成功获取到box的高度。后来在调试过程中，页面在CHROME上跑确实也没有问题，可是到了QQ浏览器，2345浏览器还有搜狗浏览器上的时候，问题来了，在使用这个方法去获取box的高度的时候，获取到的始终是100，也就是margin的总高度。显而易见，问题的原因是这个方法并没有获取到图片的高度。
起初我的猜想是可能因为我没有设置图片块状显示，所以导致高度无法获取，于是，我便在css中设置了图片的样式为：

#box > img {
    margin-bottom: 20px;
    display: block;
    width: 100%;
}

然鹅。。。并没有什么卵用。这就很扎心了。一筹莫展。
最终，在多方查找资料之后，终于找到了解决问题的方法：$(window).load(）方法,在页面加载的时候就获取到相应的高度。

.....
$(window).load(function() {
    var _boxH = $('#box').outerHeight();
});
.....

遂，问题解决。