I'm getting some content that contains images into a div via ajax. The div that these stuff gets load into has a height and overflow auto and I need to stick the scrollTop to the bottom like a messenger window.

The problem is that when an image is not fully loaded, the height of the new content is not known, so that scrollTop confuses this and the scroll bar won't stick to the bottom. (or it sticks to the bottom but the change of the height after makes it jump to middle) The code I use is like this:

document.getElementById('main_div').scrollTop = 9999999;
So before running that code, how do I make sure all the images are loaded as well or at least know the correct content height? (or any other workaround)