最近在做一個聊天會話框,我可以得到數據列表,包括文本,圖片和聲音,最多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);
}
});
}
聊天會話框,圖片加載如何保持滾動條位置?
哆啦的時光機
2018-10-20 13:11:26