Javascript 加载具有可变尺寸的图像后，保持底部的滚动位置

我有一个带有聊天功能的Cordova应用程序，可以从设备上的SQLite数据库加载图像。我有代码可以在聊天室打开时将其滚动到底部，但存在一个问题，即当出现此编程滚动时，聊天室图像可能无法完全加载。因此，当图像完全加载时，其高度将添加到消息容器的高度，导致容器底部移动，因此聊天屏幕不再滚动到底部。我当前的解决方案是使用检查添加到容器中的

img

节点。下面是突变观察者回调函数的外壳：

    const mutObsCb = function(mutationsList) {
      if (userHasScrolledChatMessages) {
        // no need to scroll down to bottom
        return;
      }
      mutationsList.forEach(function(mutation) {
            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                [].forEach.call(mutation.addedNodes, function(node) {
                    if (node.matches('.nodeWithImages')) {
                      // this message contains at least one image
                      const imgs = node.querySelectorAll('img');
                      imgs.forEach(function(img) {
                        // has image request completed even if it failed?
                        if (img.complete) {
                          scrollChatToBottom();
                        } else {
                          img.onload = function() {
                            scrollChatToBottom();
                          };
                        }
                      });
                    }
                });
              }
        })
    };

基本上，如果图像请求已完成（通过检查属性），我将滚动到容器的底部，否则我将为图像的

onload

处理程序分配一个函数，并在函数中将聊天滚动到底部

---

此方法的问题在于，当一个或多个图像开始加载（因此滚动位置发生变化）但尚未完全加载（因此聊天尚未滚动到底）时，进入聊天室后可能会有一段短暂但明显的时间。我不想有这么短的时间，我想进入聊天室，并让它滚动到底部，即使图像加载。期待您的建议，谢谢

仅在聊天室已加载并准备就绪时显示聊天室？基本上你只是想隐藏那个简短的部分？不完全是。必须显示聊天记录，但聊天记录需要一直滚动到底部。加载图像可以在最终加载时更改滚动位置，我正试图阻止或解释这种更改。