动态加载未知数量图片后如何获取对应div的最终渲染高度

直接使用Promise.all包装所有图片的加载监听逻辑即可实现需求，无需手动统计计数，同时可以自动适配任意数量的图片，比正则匹配HTML统计图片数量的方案更稳定，避免正则匹配到注释、字符串中的img标签导致统计错误。

具体实现代码如下：

const main = async () => {
  const c = document.querySelector("#content");
  // 插入你的动态渲染内容
  c.innerHTML = `<img src='https://images.theconversation.com/files/292585/original/file-20190916-19040-t0k3yp.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=926&fit=clip' />`;
  
  // 选中容器内所有图片
  const imgs = c.querySelectorAll('img');
  // 无图片场景直接获取高度
  if (imgs.length === 0) {
    console.log("Height: " + c.offsetHeight);
    return;
  }

  // 将每个图片的加载状态包装为Promise
  const loadPromises = Array.from(imgs).map(img => {
    return new Promise(resolve => {
      // 图片已加载完成（如浏览器缓存场景）直接返回
      if (img.complete) return resolve();
      // 加载成功触发
      img.addEventListener('load', resolve);
      // 加载失败也触发，避免单图加载失败阻塞高度获取
      img.addEventListener('error', resolve);
    });
  });

  // 等待所有图片加载完成
  await Promise.all(loadPromises);
  // 此时容器高度已计算完成
  console.log("Height: " + c.offsetHeight);
}

main();

如果需要兼容不支持async/await的运行环境，可将await部分替换为.then写法：

Promise.all(loadPromises).then(() => {
  console.log("Height: " + c.offsetHeight);
});

内容的提问来源于stack exchange，提问作者Jakob Nielsen