getBoundingClientRect()对不同图片返回相同值的问题求助

核心问题分析 #

你遇到的getBoundingClientRect()返回宽高0、位置完全一致的问题，根源在于两点：

1. 图片未加载完成就执行位置计算：window.onload仅等待DOM结构加载完毕，不保证图片资源渲染完成，此时图片还没生成实际尺寸，导致返回的rect值异常。
2. 左右图片列未设置垂直堆叠布局：.left和.right容器缺少垂直排列的flex属性，图片无法正常堆叠，布局位置混乱。

具体修复步骤 #

1. 等待所有图片加载完成再计算位置 #

修改window.onload逻辑，用Promise监听所有图片的加载状态，确保图片渲染完毕后再执行位置计算：

window.onload = function() {
  loadImages();
  // 等待所有图片加载完成
  const allImages = document.querySelectorAll('.left img, .right img');
  const loadPromises = Array.from(allImages).map(img => {
    return new Promise((resolve) => {
      if (img.complete) resolve();
      else img.onload = resolve;
    });
  });
  Promise.all(loadPromises).then(() => {
    adjustImageVisibility();
  });
};

2. 修复左右列的垂直布局 #

给.left和.right容器添加flex垂直排列属性，让图片正常堆叠：

.left,
.right {
  /* for the images */
  width: 20%;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px; /* 可选：给图片之间添加间距 */
}

3. 修正循环中的目标图片错误 #

你当前循环注释写的是遍历左侧图片，但代码里获取的是右侧图片ID，统一逻辑：

// 遍历左侧图片
for (let i = 0; i <= totalImages; i++) {
  const img  = document.getElementById(`Image ${i} left`);
  const rect = img.getBoundingClientRect();
  console.log(rect);
}

如果要遍历右侧图片，保持现有代码即可，确保ID和创建时的命名规则一致。

4. 可选：添加图片加载失败处理 #

避免图片加载失败导致布局异常，给图片添加错误监听：

// 创建leftImg后添加
leftImg.onerror = function() {
  this.style.display = 'none';
};
// 创建rightImg后添加
rightImg.onerror = function() {
  this.style.display = 'none';
};

验证修复效果 #

完成修改后刷新页面，getBoundingClientRect()会返回图片的实际渲染尺寸和正确位置，此时你可以继续编写逻辑，对比图片位置与文本底部位置，实现隐藏下方图片的功能。

内容的提问来源于stack exchange，提问作者Akut Luna