不同div中按钮与相邻文本对齐方案咨询，现有jQuery实现待优化

问题1：介于window load和document ready之间的触发时机 #

存在，你不需要等待整个窗口的所有资源加载完成，只需要监听你用到的目标图片的load事件即可。这个触发时机远早于window load，仅在目标图片加载完成后就执行，不会受页面其他资源（其他图片、样式、脚本等）加载速度的影响。
兼容图片已缓存的写法参考：

$(".second img").on("load", function() {
  // 原有位置计算逻辑
}).each(function() {
  // 处理已经加载完成（缓存）的图片，主动触发回调
  if(this.complete) $(this).trigger("load");
});

问题2：无需JS的CSS实现方案 #

完全可以只用CSS实现，不需要修改现有HTML结构，调整以下CSS即可满足所有约束条件：容器高度仍由图片决定，文本、图片高度变化时自动对齐，可多场景复用。
调整后的CSS代码：

.body {
  width: 800px;
}

.container {
  display: flex;
  flex-direction: row;
  align-items: stretch; /* 让左右两个子容器高度一致，都等于图片高度 */
  
  .first, .second {
    width: 50%;
  }
  
  .first {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .second {
    position: relative; /* 作为按钮的定位父级 */
  }

  .text {
    padding: 60px;
    box-sizing: border-box;
  }
  
}

.button {
  padding: 10px;
  background: lightblue;
  position: absolute;
  /* 此处可根据实际对齐需求调整定位属性：
  要对齐文本底部就设置bottom: 60px（和文本下padding值一致）
  要对齐文本中线就设置top: 50%，再加transform: translateY(-50%) */
  bottom: 60px;
  left: 740px; /* 可根据实际布局需求调整 */
  a {
    color: white;
  };
}

问题3：其他可行实现建议 #

• 如果后续需要适配更多动态对齐场景，可使用CSS Subgrid特性（兼容现代主流浏览器），可实现跨子容器的元素对齐，不需要额外定位逻辑
• 如果一定要保留JS计算的方案，建议增加窗口 resize 防抖监听，窗口大小变化时重新计算位置，避免对齐失效
• 如果要兼容极端的动态内容变化场景，可以用MutationObserver监听文本、图片的尺寸变化，自动更新按钮位置

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