窗口宽度 onload jquery - Javascript

介绍如何使用 jQuery 和 JavaScript 来监测窗口宽度并在 onload 事件时触发函数。

监测窗口宽度

为了监测窗口宽度，我们需要使用 $(window).width() 方法。这个方法返回当前窗口的宽度。

// 获取窗口宽度
var windowWidth = $(window).width();

在 onload 事件时触发函数

为了在 onload 事件时触发函数，我们需要使用 $(window).on('load', function(){}) 方法。这个方法会在所有图片和其他资源加载完毕后触发。

$(window).on('load', function(){
  // 代码逻辑
});

完整代码示例

下面是一个完整的代码示例，演示如何监测窗口宽度并在 onload 事件时触发函数。

$(window).on('load', function(){
  var windowWidth = $(window).width();

  if (windowWidth <= 768) {
    // 窗口宽度小于等于 768px 的代码逻辑
  } else {
    // 窗口宽度大于 768px 的代码逻辑
  }
});

在这个示例中，我们使用 windowWidth 变量来存储窗口宽度，然后根据宽度大小执行不同的代码逻辑。

总结

使用 jQuery 和 JavaScript 监测窗口宽度并在 onload 事件时触发函数非常简单。通过使用 $(window).width() 监测窗口宽度，然后使用 $(window).on('load', function(){}) 在 onload 事件时触发函数，我们可以轻松地执行不同的代码逻辑，以适应不同的设备和窗口大小。