使用jQuery 2.3与3.3修改元素CSS高度的差异问题

这个问题我之前碰到过！核心原因是jQuery 3.0及以上版本已经完全移除了$(window).load()方法，这就是你的代码在jQuery 3.3里无法生效的关键所在。

问题根源拆解 #

在jQuery 2.x及更早版本，$(window).load()是用来等待所有页面资源（包括图片、样式表、字体等）加载完成后再执行代码的，这对于需要精准获取元素宽度（尤其是包含背景图的容器）的场景非常有用。但从jQuery 3.0开始，官方废弃并移除了这个方法，改用标准的事件绑定方式来处理load事件。

修改后的完整可运行代码 #

JavaScript 代码 #

function makehorizontal() { 
  var myWidth = jQuery('.horizontaled').width(); 
  var myHeight = myWidth / 1.6 + 'px'; 
  $('.horizontaled').css('height', myHeight); 
} 

// 替换原有的$(window).load()，使用jQuery 3.x支持的事件绑定方式
$(window).on('load', function() { 
  makehorizontal(); 
}); 

// 优化resize事件：添加防抖逻辑，避免窗口缩放时频繁触发函数
$(window).on('resize', function() {
  clearTimeout(window.resizeTimer);
  window.resizeTimer = setTimeout(function() {
    makehorizontal();
  }, 250);
});

CSS 代码（无需修改） #

.image-background-holder{ 
  width:100%; 
  min-height: 100px; 
  position:relative; 
}

HTML 代码（无需修改） #

<div class="image-background-holder horizontaled"> ... </div><!--image-background-holder-->

额外优化说明 #

1. 防抖resize事件：我给resize事件加了250ms的延迟定时器，避免窗口拖拽缩放过程中反复调用makehorizontal()，能有效提升页面性能。
2. 兼容性补充：如果你的页面需要兼容极老浏览器，也可以同时保留$(document).ready()作为备选，但对于需要精准获取元素尺寸的场景，window.load事件依然是更可靠的选择——它会确保所有资源加载完成后再计算尺寸。

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