I'm updating the src attribute of an <img> tag in javascript. After I've done this, I need to get the new height of its parent <div> so that I can update the size of other elements on the page. If I retrieve the parent's offsetHeight property directly after updating the image's src, however, I get the height before the change was made. Is there a way to force the browser to render the updated page so that I can get the new height?
Repro:
<html>
<head>
<script type="text/javascript">
function changeImage(){
document.getElementById("image").src = "b.jpg";
// here I need to re-render the page
alert(document.getElementById("parent").offsetHeight);
// ^ alerts the height of a.jpg, not b.jpg (unless this is the second click)
}
</script>
</head>
<body onclick="changeImage()">
<div id="parent">
<img id="image" src="a.jpg" />
</div>
</body>
</html>