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

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 class="father">
    <img class="img"></div>

先监听图片的onload事件，然后图片加载完成就马上设置滚动条到最底部：

$('.img').on('load', function() { // 图片已加载完成
    $('.father').scrollTop(9999); // 滚动到最底部});

这里scrollTop()写大一点也没关系：如果元素的scrollTop超过或是等于元素内容的总高度，都会滚动到底部的。
所以只要保证scrollTop能比这20条信息的总高度都要高，这样就肯定能滚动到你父元素的底部啦。

哈哈，原理就这么简单。希望对你有帮助。