如何高效可靠地将网页中第二张图片调整为第一张的尺寸？

要解决图片尺寸读取为0、避免尺寸变化闪烁的问题，你可以从确保图片加载完成后再调整尺寸和提前隐藏图片避免闪烁这两个方向入手，以下是两种可靠的实现方式：

方法一：等待两张图片都加载完成后统一调整 #

这种方式适合两张图片需要同时显示的场景，通过Promise监听两张图片的加载状态，确保拿到真实尺寸后再调整并显示图片：

<img id='img1' src='img1.jpg' style="display: none;">
<img id='img2' src='img2.jpg' style="display: none;">
<script>
// 封装图片加载等待函数
function waitForImage(img) {
  return new Promise(resolve => {
    // 如果图片已经加载完成（比如缓存）
    if (img.complete && img.naturalWidth !== 0) {
      resolve(img);
    } else {
      // 监听加载完成/失败事件
      img.onload = () => resolve(img);
      img.onerror = () => resolve(img);
    }
  });
}

const img1 = document.getElementById('img1');
const img2 = document.getElementById('img2');

// 等待两张图片都就绪
Promise.all([waitForImage(img1), waitForImage(img2)]).then(([loadedImg1, loadedImg2]) => {
  // 获取第一张图片的真实尺寸（不受CSS影响）
  const width = loadedImg1.naturalWidth;
  const height = loadedImg1.naturalHeight;
  
  // 设置第二张图片尺寸
  loadedImg2.style.width = `${width}px`;
  loadedImg2.style.height = `${height}px`;
  
  // 显示两张图片
  loadedImg1.style.display = 'block';
  loadedImg2.style.display = 'block';
});
</script>

关键细节： #

• 使用naturalWidth/naturalHeight获取图片原始尺寸，比offsetWidth更准确（后者会受padding、边框等CSS样式影响）
• 先隐藏图片，调整完成后再显示，完全避免尺寸变化的闪烁
• 处理了图片缓存的情况（img.complete判断），避免重复等待加载

方法二：先加载第一张图片，再初始化第二张图片 #

如果允许第二张图片延迟显示，可以等第一张图片尺寸确定后，再给第二张图片设置src和尺寸，从根源避免尺寸变化：

<img id='img1' src='img1.jpg'>
<img id='img2' style="display: none;">
<script>
const img1 = document.getElementById('img1');
const img2 = document.getElementById('img2');

function initSecondImage() {
  // 获取第一张图片的真实尺寸
  const width = img1.naturalWidth;
  const height = img1.naturalHeight;
  
  // 设置第二张图片的尺寸和资源
  img2.style.width = `${width}px`;
  img2.style.height = `${height}px`;
  img2.src = 'img2.jpg';
  
  // 第二张图片加载完成后显示
  img2.onload = () => {
    img2.style.display = 'block';
  };
}

// 处理图片已缓存的情况
if (img1.complete && img1.naturalWidth !== 0) {
  initSecondImage();
} else {
  // 监听第一张图片加载完成事件
  img1.onload = initSecondImage;
  img1.onerror = initSecondImage;
}
</script>

优势： #

• 第二张图片从加载开始就带着正确的尺寸，不会出现加载后再调整的情况
• 仅需等待第一张图片加载，比等待两张的方式更快显示第一张图片

额外注意： #

• 避免使用纯数字作为元素ID（虽然浏览器兼容，但不符合HTML规范），建议改为img1、img2这类命名
• 如果需要支持响应式场景（比如窗口大小变化时调整），可以额外监听resize事件，重新同步尺寸

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