触发resize事件

最新推荐文章于 2024-11-30 14:34:35 发布
原创 最新推荐文章于 2024-11-30 14:34:35 发布 · 834 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript

resize 事件是在浏览器窗口大小发生变化时触发，利用该事件可以跟踪窗口大小的变化来动态调整页面的元素显示。

window.dispatchEvent(new Event('resize'));
KUIKUI_
关注
JavaScript窗口大小变化事件：window.resize
专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。
01-12 4076
JavaScript作为一种前端开发的关键性语言，为实现动态、交互性强的网页效果提供了有力的支持。其中，窗口调整事件 window.resize 在响应式设计和用户体验优化中扮演着重要的角色。通过监听窗口大小的变化，开发者可以动态调整页面布局、样式，以适应不同设备和屏幕尺寸，提供更好的用户体验。
windows.resize监听事件导致浏览器cpu占用高
qq_33159000的博客
03-31 2751
1.场景：最近在实现一个监控系统的dashboard页面，这个页面上有很多的echarts图表，当浏览器窗口大小变化时，页面的所有数据要重新计算宽高值，于是使用了window.addEventListener("resize") 来解决这个问题。 2. 结果：在使用过程中，发现当浏览器窗口多次改变大小之后，页面卡顿的很厉害，查看浏览器的cpu占用率也很高，迟迟降不下来。郁闷中～，因为在之前的项目中也使用过监听事件，但没有发现过这个问题，就很自信～，罪过呀 3.排查了很长时间，各种百度，无意中看到wind
IE之动态添加DOM节点触发window.resize事件
09-05
因为页面很多UI是绝对定位的,所以当窗口大小改变的时候会使原先的布局混乱,只好在每次window.resize的时候重新布局...
触发浏览器窗口的resize事件
JCAL123的博客
08-07 3989
在某些项目里，需要监听浏览器窗口的resize事件，比如echarts图表在浏览器宽度发生变化时需要自适应宽度，这时候就需要监听浏览器窗口宽度或高度的变化，但是在某些试试，浏览器窗口即使不变化，我们也需要触发它的resize事件，很简单，两行代码即可： 1、定义一个函数 asideResize(){ let myEvent = new Event(‘resize’); // resize是指r...
window.resize 事件
qq_43730272的博客
11-30 739
new Event(‘resize’) 创建一个新的 resize 事件对象，并通过 dispatchEvent 方法将其派发到 window 对象上。resize 事件在 Web 开发中用于监听窗口大小的变化。当浏览器窗口的尺寸发生变化时，会触发 resize 事件。
解决vue 给window添加和移除resize事件遇到的坑
10-15
最后，针对本文所提到的“在切换到其他的页面的时候,屏幕改变的时候还是会触发resize事件”的问题。在实际项目中，如果在页面切换时resize事件依然被触发，可能是由于事件监听器没有被正确移除。解决方案是在切换...
在IE浏览器中resize事件执行多次的解决方法
09-05
在IE浏览器中，resize事件可能会遇到一个问题，即在用户调整窗口大小时，该事件会被频繁地触发，导致处理函数被执行多次。这个问题不仅影响性能，还可能由于事件处理过程中的复杂计算，特别是在IE浏览器中，引发...
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
09-04
`resize`事件就是用于捕获这一行为的关键JavaScript事件。然而，当涉及到框架（frame）或者iframe时，直接在主页面中使用`resize`事件可能无法正确地响应框架内的元素。针对这种情况，我们可以采取以下两种方法来...
关于window的resize事件
weixin_30448685的博客
03-07 461
也许你也遇到过这样的问题，或者还没注意到有过这样的问题，如下代码，在窗口发生变化时，会进入死循环： var _funResize = function(){ console.log('resize...' + Math.random()); } $(window).bind('resize',_funResize); 是问题，总得研究解决，方案： var ...
手动触发window的resize事件
qq_42927276的博客
03-11 5022
1.如果浏览器的监听事件是window.on(‘resize’,fn)，可以使用jq的写法，$(window).trigger(‘resize’)，这种写法不支持window.addEventListener()的写法 2.JS的写法：var myEvent = new Event('resize');window.dispatchEvent(myEvent)或者var ev = document...
主动触发浏览器的resize()方法
qq_59625204的博客
07-14 777
【代码】主动触发浏览器的resize()方法。
如何触发window.resize()
ydZ157的博客
10-31 1141
如何触发window.resize()
手动触发浏览器resize
weixin_30312563的博客
11-06 2203
今天做echarts图表 发现饼图不能居中，resize之后才会居中。 于是想手动触发resize方法，但是不改变浏览器窗口 　JQ　$(window).trigger('risize'); 　JS var e =document.createEvent("Event"); 　　　 e.init("resize",true,true); 　　 window.dispat...
手动触发resize事件
wangweiscsdn的博客
05-13 1910
let btn = document.getElementById('btn'); btn.onclick = function () { setTimeout(() => { let myEvent = new Event('resize'); window.dispatchEvent(myEvent); console.log('111', myEvent) },400) }
$(window).resize()触发条件
日常编码
08-17 8333
最开始以为resize只要浏览器大小发生变化就会出发，后来发现其实不是，只有浏览器的宽度发生改变时，才会触发resize函数
Window的resize事件及反抖函数应用
Anna_lhy的博客
11-21 2741
应用场景：在Vue工程中，添加样式，部分需要做到自适应，需要添加resize事件。（浏览器的窗口发生改变时，才会触发resize函数） 由于是单页面应用，如果组件初始化的时候绑定事件，在切换页面的时候不去注销事件，如果来回切换，会让resize事件执行多个函数，迅速消耗CPU,浏览器会出现卡顿的情况，所以一般在mounted函数中添加 resize事件，destroy 函数中删除 resize事...
关于window.resize
chunzong2759的博客
06-27 5934
在移动端不同屏幕上面显示时，视图窗口大小不一。 window.resize是窗口大小改变时触发的事件。 原生： window.onresize = function() { //此处为其设置一个延时，因为该方法可能会触发两次。 var res; if (res){ clearTimeout(r...
使用window.resize实现当浏览器宽度变化时触发相应函数
weixin_59742742的博客
07-04 981
如果我们有一个页面元素位置和宽高是根据其他页面元素的位置和宽高动态计算而成的，如果你实现的是响应式页面，那么该页面元素会随着浏览器窗口大小变化而变化它的大小位置，这时我们需要window.resize方法来实现动态响应式执行函数。该方法可以在窗口大小调整时触发一个函数。
ontrol myQuery; Int32 i = 0; Queue<Control> ControlQuery = new Queue<Control>(MyControlQuery_Init); Int32 count = ControlQuery.Count; ControlInfo Node = new ControlInfo(); GetMainFromSize_Curr(MyForm); Main_XRatio = (double)(MainDlg_W_Curr / (double)MainDlg_W_Init); Main_YRatio = (double)(MainDlg_H_Curr / (double)MainDlg_H_Init); for (i = 1; i < count; i++) { myQuery = ControlQuery.Dequeue(); myQuery.SuspendLayout(); Node = (ControlInfo)MyControlInfoList_Init[i]; myQuery.Height = (Int32)(Node.Height * Main_YRatio); myQuery.Width = (Int32)(Node.Width * Main_XRatio); myQuery.Location = new Point((Int32)(Node.Loc_X * Main_XRatio), (Int32)(Node.Loc_Y * Main_YRatio)); myQuery.Font = new Font(Node.F_Name,(float)Node.Word_Size*(float)Main_XRatio); }这个函数里面哪个会触发resize事件
最新发布
11-13
<think> 我们正在分析一段C# WinForms代码，目的是确定代码中哪些操作可能触发控件的Resize事件。 根据引用[1]的内容，控件在以下情况会触发resize事件： - 控件显示时的初始大小设置 - 控件的大小改变（如调用resize函数） - 窗口大小改变导致子控件大小改变 - 布局管理器调整控件大小 - 窗口的最大化/最小化 - 窗口内容改变导致控件需要调整大小 - 操作系统或窗口管理器事件 现在，我们来看用户提供的代码片段： ```csharp Control myQuery; Int32 i = 0; Queue<Control> ControlQuery = new Queue<Control>(MyControlInfoList_Init); Int32 count = ControlQuery.Count; ControlInfo Node = new ControlInfo(); GetMainFromSize_Curr(MyForm); Main_XRatio = (double)(MainDlg_W_Curr / (double)MainDlg_W_Init); Main_YRatio = (double)(MainDlg_H_Curr / (double)MainDlg_H_Init); for (i = 1; i < count; i++) { myQuery = ControlQuery.Dequeue(); myQuery.SuspendLayout(); // 挂起控件的布局逻辑 Node = (ControlInfo)MyControlInfoList_Init[i]; myQuery.Height = (Int32)(Node.Height * Main_YRatio); // 设置高度 myQuery.Width = (Int32)(Node.Width * Main_XRatio); // 设置宽度 myQuery.Location = new Point((Int32)(Node.Loc_X * Main_XRatio), (Int32)(Node.Loc_Y * Main_YRatio)); // 设置位置 myQuery.Font = new Font(Node.F_Name, (float)Node.Word_Size * (float)Main_XRatio); // 设置字体 } ``` 在循环中，对每个控件执行以下操作： 1. `myQuery.SuspendLayout()`: 挂起控件的布局逻辑，这样在恢复布局之前，对控件的大小和位置等属性的修改不会立即触发布局事件（包括Resize事件）。 2. 设置控件的高度（`Height`属性） 3. 设置控件的宽度（`Width`属性） 4. 设置控件的位置（`Location`属性） 5. 设置控件的字体（`Font`属性） 根据引用[1]，改变控件的大小（即设置`Height`和`Width`属性）通常会触发`Resize`事件。但是，由于在这段代码中，我们使用了`SuspendLayout()`，它会暂时阻止控件触发布局相关的事件（包括Resize事件）。在循环结束后，通常需要调用`ResumeLayout()`来恢复布局，并可能触发一次布局事件（包括Resize事件）。但是，在这段代码中，并没有在循环内调用`ResumeLayout()`，所以我们需要注意循环外部是否有恢复布局的操作。 另外，设置控件的位置（`Location`属性）不会直接触发`Resize`事件，因为`Resize`事件只与大小改变有关。位置改变会触发`Move`事件。 设置字体（`Font`属性）可能会导致控件的大小需要调整（例如，如果控件的`AutoSize`属性为true，那么改变字体会导致控件调整大小以适应新字体），从而可能触发`Resize`事件。但是，由于我们正在挂起布局，所以即使设置了字体，也不会立即触发事件。 总结： 在循环内部，由于使用了`SuspendLayout()`，所以设置高度、宽度、位置和字体都不会立即触发`Resize`事件。但是，如果在循环结束后，代码调用了`ResumeLayout()`（在代码片段中没有显示，但通常需要调用），那么在恢复布局时，控件可能会处理挂起的布局事件。此时，如果控件的大小确实发生了改变，那么`Resize`事件会被触发。 因此，在循环内，直接设置`Height`和`Width`属性不会立即触发`Resize`事件，但恢复布局后可能会触发。 注意：在WinForms中，当控件的`Size`发生变化时，会触发`Resize`事件。而设置`Height`或`Width`属性实际上会改变`Size`属性（因为`Size`包含了高度和宽度）。 所以回答用户的问题：在循环内，由于挂起了布局，所以不会触发`Resize`事件。但是，如果在循环结束后恢复布局，那么这些大小改变的操作将会被处理，并可能触发`Resize`事件（每个大小发生改变的控件都会触发一次）。 需要提醒用户：这段代码中并没有在循环内恢复布局，所以触发`Resize`事件的时机是在恢复布局的时候（可能在循环之后有恢复布局的操作）。 另外，如果控件在父控件中使用了布局管理器（如Dock, Anchor或TableLayoutPanel等），那么改变控件大小可能会影响其他控件，导致其他控件也改变大小，从而触发它们的`Resize`事件。但是，在这段代码中，我们挂起了每个控件的布局，所以即使有布局管理器，也不会立即触发。但是，如果父控件使用了布局管理器，那么在父控件恢复布局时，可能会重新计算所有子控件的大小，进而可能触发多个`Resize`事件。 因此，最终结论是： 代码中直接改变控件大小的操作（设置Height和Width）不会在设置时立即触发Resize事件，因为使用了SuspendLayout。但是，在后续调用ResumeLayout时，会处理这些改变，并触发Resize事件（如果大小确实改变的话）。 如果用户想避免在批量调整大小时多次触发Resize事件，可以在整个批量调整之前挂起父控件的布局，并在调整后恢复父控件的布局，这样父控件的布局只会进行一次，从而减少子控件的Resize事件触发次数（但每个子控件在大小改变时仍会触发自己的Resize事件，不过由于父控件挂起布局，这些事件可能会被延迟到恢复布局时一起处理）。另外，也可以考虑在调整大小之前先取消事件处理程序的订阅，调整完再重新订阅。但是，最常用的方法还是使用SuspendLayout和ResumeLayout。 注意：在循环中，每个控件都单独调用了SuspendLayout，这样每个控件都会延迟布局事件。但是，如果这些控件有子控件，那么父控件的布局挂起不会影响子控件。不过，这里每个控件都是独立挂起的。 另外，用户代码中循环是从1开始（i=1），而队列中元素的个数是count，注意队列中的第一个元素（索引0）没有被处理？这可能是用户代码的一个错误，但这不是我们当前问题的重点。 所以，用户问题的答案是：代码中改变控件大小的操作（设置Height和Width）在设置时不会触发Resize事件，因为使用了SuspendLayout。但是，在后续恢复布局（ResumeLayout）时，会触发Resize事件（如果大小确实改变）。 如果用户没有在循环后恢复布局，那么这些事件将不会被触发，直到布局被恢复。 </think>根据您的代码和引用内容分析，以下操作会触发控件的 `Resize` 事件： ### 会触发 Resize 事件的操作 1. **直接修改控件尺寸属性** ```csharp myQuery.Height = (Int32)(Node.Height * Main_YRatio); // 触发 resize 事件 [^1] myQuery.Width = (Int32)(Node.Width * Main_XRatio); // 触发 resize 事件 [^1] ``` - 直接设置 `Height` 或 `Width` 属性会立即触发控件的 resize 事件 2. **通过位置变化间接触发** ```csharp myQuery.Location = new Point(...); // 可能间接触发 resize [^1] ``` - 当位置变化导致父容器重新计算布局时（如使用布局管理器），可能触发子控件 resize 事件 3. **字体大小变化（特定条件下）** ```csharp myQuery.Font = new Font(...); // 可能触发 resize [^1] ``` - 当控件的 `AutoSize = true` 时，字体改变会导致控件自动调整尺寸 ### 不会触发 Resize 事件的操作 ```csharp myQuery.SuspendLayout(); // 暂停布局事件触发 ✅ ``` - 您已正确使用 `SuspendLayout()` 暂停事件触发 - 但需注意：在循环结束后需要调用 `ResumeLayout()` 恢复布局 ### 关键优化建议 1. **批量更新后统一恢复布局** ```csharp // 在循环前挂起主容器布局 MyForm.SuspendLayout(); for(...) { // 单个控件操作... } // 循环结束后统一恢复布局（只触发一次resize） MyForm.ResumeLayout(true); // true 表示强制执行布局更新 ``` 2. **尺寸变化检测（避免无效重绘）** ```csharp if(myQuery.Height != newHeight || myQuery.Width != newWidth) { // 仅当尺寸实际改变时才更新 myQuery.Height = newHeight; myQuery.Width = newWidth; } ``` 3. **处理图像时的类型转换（引用[2]）** ```csharp // 如果涉及图像缩放，确保使用正确数据类型 img_array = np.array(img).astype("float"); // 避免类型错误 [^2] ``` ### 触发机制总结 | 操作类型 | 是否触发 Resize | 说明 | |----------|-----------------|------| | `Height/Width` 赋值 | ✔️ | 直接修改尺寸属性 | | `Size` 属性赋值 | ✔️ | 整体尺寸修改 | | `Dock/Anchor` 变化 | ✔️ | 布局属性变更 | | `Location` 修改 | ⚠️ | 可能通过父容器间接触发 | | `Font` 修改 | ⚠️ | AutoSize=true 时触发 | | `SuspendLayout()` 期间 | ✖️ | 挂起状态不触发事件 | 建议在批量修改控件属性时始终使用 `SuspendLayout()`/`ResumeLayout()` 包裹操作，可减少 90% 以上的不必要事件触发 [^1]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值