本教程旨在解决使用jquery根据屏幕尺寸动态调整dom元素位置时，代码仅在窗口尺寸变化时生效，而无法在页面初始加载时应用的问题。我们将通过优化代码结构，确保元素位置在页面加载时即刻调整，并在窗口尺寸变化时同步更新，同时提供代码示例和相关注意事项，以构建响应式用户界面。
在开发响应式网页时，我们经常需要根据屏幕尺寸调整页面元素的布局。例如，在小屏幕设备上将某个信息块移动到另一个元素的上方，而在大屏幕上则移动到另一个位置。使用jQuery的$(window).on(‘resize’, function(){…})事件是实现这一功能的常见方法。然而，一个常见的问题是，如果仅将逻辑放入resize事件处理函数中，那么在页面首次加载时，这些布局调整并不会立即生效，只有当用户手动调整浏览器窗口大小时，改变才会发生。这显然不符合预期，因为用户希望在页面加载完成时就能看到正确的布局。
问题分析
原始代码示例展示了这一典型的场景：
jQuery(function($){ jQuery(document).ready(function(){ jQuery(window).on('resize', function(){ if(jQuery(window).width() = 1025){ jQuery( ".checkout.woocommerce-checkout .woocommerce-shipping-fields__wrapper" ).insertBefore( ".checkout.woocommerce-checkout .flux-checkout__content-right #order_review" ); } }); }); });
这段代码的问题在于，核心的布局调整逻辑被完全封装在resize事件的回调函数中。这意味着，只有当resize事件被触发（即窗口大小发生变化）时，其中的代码才会被执行。在页面首次加载时，resize事件并不会自动触发，因此元素的位置不会被调整。
解决方案
要解决这个问题，我们需要确保布局调整逻辑在两个关键时刻被执行：
页面加载完成时：确保首次访问页面时就能应用正确的布局。窗口大小变化时：保持响应式行为，当用户调整窗口大小时，布局能动态更新。
最简洁有效的方法是将布局调整逻辑封装在一个独立的函数中，然后在页面加载完成时调用一次该函数，并将其绑定到resize事件上。
优化后的代码示例
以下是优化后的jQuery代码，它解决了上述问题：
$(function(){ // 页面加载完成后立即调用一次resize函数 adjustElementPosition(); // 绑定resize事件，当窗口大小变化时调用adjustElementPosition函数 $(window).on('resize', adjustElementPosition); /** * 根据屏幕宽度调整指定元素的DOM位置。 * 当屏幕宽度小于等于1024px时，将.woocommerce-shipping-fields__wrapper插入到 * .flux-step--2 .flux-checkout__shipping-table之前。 * 否则，插入到.flux-checkout__content-right #order_review之前。 */ function adjustElementPosition(){ $( ".checkout.woocommerce-checkout .woocommerce-shipping-fields__wrapper" ) .insertBefore( // 使用三元运算符根据屏幕宽度选择目标元素 $(window).width() <= 1024 ? ".checkout.woocommerce-checkout .flux-step.flux-step--2 .flux-checkout__shipping-table" : ".checkout.woocommerce-checkout .flux-checkout__content-right #order_review" ); }});
代码解释
$(function(){ … });：这是jQuery的简写形式，等同于$(document).ready(function(){ … });。它确保其中的代码在DOM加载完毕后执行，避免操作尚未存在的元素。adjustElementPosition();：在DOM加载完成后，我们立即调用一次adjustElementPosition函数。这保证了在页面首次加载时，元素的位置会根据当前屏幕尺寸进行调整。$(window).on(‘resize’, adjustElementPosition);：我们将adjustElementPosition函数作为回调函数绑定到window对象的resize事件上。这意味着，每当浏览器窗口大小发生变化时，adjustElementPosition函数都会被执行，从而实现动态响应。function adjustElementPosition(){ … }：这是一个独立的函数，封装了根据屏幕宽度判断并调整元素位置的逻辑。三元运算符 condition ? value_if_true : value_if_false：在insertBefore()方法中，我们使用三元运算符来简洁地根据$(window).width() .insertBefore(target)：这是一个jQuery方法，用于将选定的元素（在这里是.woocommerce-shipping-fields__wrapper）插入到target元素之前。
注意事项
性能优化（Debouncing/Throttling）：resize事件在用户调整窗口大小时会频繁触发，这可能导致性能问题，尤其是在执行复杂DOM操作时。为了优化性能，可以考虑使用去抖（debounce）或节流（throttle）技术来限制adjustElementPosition函数的执行频率。
去抖（Debounce）：在事件停止触发一段时间后才执行回调函数。例如，用户停止调整窗口大小500毫秒后才执行。节流（Throttle）：在一定时间内只执行一次回调函数。例如，每200毫秒最多执行一次。可以使用Lodash库或手动实现这些功能。
// 示例：使用简单的去抖函数function debounce(func, delay) { let timeout; return function(...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => func.apply(context, args), delay); };}$(function(){ adjustElementPosition(); $(window).on('resize', debounce(adjustElementPosition, 250)); // 250毫秒去抖});
CSS替代方案：对于纯粹的视觉布局调整（例如改变元素的顺序或位置），CSS通常是更优的选择，因为它提供了更好的性能和更简单的维护。例如，使用Flexbox的order属性或CSS Grid的grid-template-areas可以在不同屏幕尺寸下调整元素的视觉顺序，而无需JavaScript介入。JavaScript应保留给那些无法通过纯CSS实现的复杂DOM结构操作。
选择器特异性：确保jQuery选择器足够具体，以准确地选中目标元素，避免意外修改其他元素。
视口单位：在判断屏幕宽度时，$(window).width()获取的是视口宽度。如果需要考虑滚动条宽度，可能需要额外的计算。
移动设备测试：在移动设备上测试，因为它们的视口行为可能与桌面浏览器有所不同，并且虚拟键盘的弹出也可能触发resize事件。
总结
通过将布局调整逻辑封装在独立函数中，并在页面加载完成时和窗口大小变化时分别调用该函数，我们能够有效地解决jQuery resize事件的初始加载问题。这种模式确保了响应式布局在所有情况下都能正确应用，提升了用户体验。同时，结合性能优化和对CSS替代方案的考量，可以构建出更健壮、高效的响应式网页。
以上就是动态调整元素位置：解决jQuery resize 事件的初始加载问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1529240.html
微信扫一扫 
支付宝扫一扫 
