javascript - 加载可变尺寸的图像后保持滚动位置在底部

Question

我有一个带有聊天功能的 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();
                          };
                        }
                      });
                    }
                });
              }
        })
    };

本质上，如果图像请求已完成（通过检查complete属性），我滚动到容器的底部，否则我将一个函数分配给图像的onload处理程序，并在该函数中将聊天滚动到底部。

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

标签： javascriptcsscordovawebview