在附加图像后让div正确滚动到底部

Question

我有一个div的聊天界面，在通过websocket后附加新消息。代码如下所示：

var msg = '<div class="msg-text">' + data.msg_text + '</div>';
$(msg).appendTo($(".msg-box")).height();
$(".msg-box").scrollTop($(".msg-box")[0].scrollHeight);

其中“data”是传递给函数的json对象。这适用于纯文本。但是，当传入的消息中包含图像时，界面无法正常滚动到底部。它只滚动50px（这是用户聊天头像的高度。它不会滚动图像的整个高度（通常是200像素的缩略图。

以下是附加代码块的实际内容：

<div class='image-links'><a href='/uploads/pod_attachment/attachment/391/chat_IMG_5523-1.JPG' title='IMG_5523-1.JPG'><img src='/uploads/pod_attachment/attachment/391/thumb_IMG_5523-1.JPG'></a></div>

我已经尝试获取我添加的元素的高度，但即使元素更大，它也只返回50px。

我也尝试过：

var msg_box = document.getElementById("msg-box");
msg_box.scrollTop = msg_box.scrollHeight;

我猜这与执行滚动功能时未完全加载到DOM中的图像有关。

有一种简单的方法可以解决这个问题吗？