聊天会话框，图片加载如何保持滚动条位置？

Question

最近在做一个聊天会话框，我可以得到数据列表，包括文本，图片和声音，最多20条。 
我之前的方法是：
首先，设置<img>的默认src，height,width等属性，以获得父div的高度，因为会话框一打开就必须滚动到底部。当我得到真正的图片时，改变src,height,width，
现在用onload事件监听得到真实高度 realHeight,但是当加载的消息记录中有较多大图片时，频繁地改变scrollTop,会引起明显的窗口抖动
有人都有类似的经验和解决方案？ 谢谢，代码如下

 function ReplacePicture (imgid, url) {    var $img = $('#img-'+imgid).children();    var oldH = parseInt($img.css('height'));
    $img.attr('oldHeight', oldH);
    $img.attr('src', url);
    $img.on('load', function() {      if(!currentPosElement){ //当前窗口为空，滚动到底部
        sureToBottom(); 
      } else {        var oldH = $(this).attr('oldHeight');        var newH = $(this).css('height').match(/\d+/g);       
       if (newH == oldH) return;
        oldH = parseInt(oldH);
        newH = parseInt(newH);        var changeH = newH - oldH;
        $(document).scrollTop($(document).scrollTop() + changeH);
        $(this).attr('oldHeight',newH);
      }
    });
  }

Answer 1

可以实现的，以前开发有遇到类似的问题，下面是最简单最快捷的方案，可供参考一下：先假设HTML是这样的：<div&nbsp;class="father"> &nbsp;&nbsp;&nbsp;&nbsp;<img&nbsp;class="img"></div>先监听图片的onload事件，然后图片加载完成就马上设置滚动条到最底部：$('.img').on('load',&nbsp;function()&nbsp;{&nbsp;//&nbsp;图片已加载完成 &nbsp;&nbsp;&nbsp;&nbsp;$('.father').scrollTop(9999);&nbsp;//&nbsp;滚动到最底部});这里scrollTop()写大一点也没关系：如果元素的scrollTop超过或是等于元素内容的总高度，都会滚动到底部的。所以只要保证scrollTop能比这20条信息的总高度都要高，这样就肯定能滚动到你父元素的底部啦。哈哈，原理就这么简单。希望对你有帮助。