The resize event occurs when the size of the window or frame is adjusted, including minimizing and maximizing the size. In IE and opera browsers, this event is triggered as long as the window border is dragged. in Mozilla browsers, the resize event is triggered only when the window size is stopped. This is a method that makes people very depressed every time they change the page window. Especially in IE browser, a slight move to the window border will trigger many events. What's even worse is that when the resize event contains some page content for processing or computing, and the resize event is triggered again, IE will be randomly suspended.
I have been searching for a long time on the Internet, all of which are subject to the same rule. A reposted method is everywhere. Here is a solution found on the Internet:
The Code is as follows:
Var resizeTimer = null;
$ (Window). resize (function (){
If (resizeTimer) clearTimeout (resizeTimer );
ResizeTimer = setTimeout ("changeHeight ()", 500 );
}); // The execution delay of the resize event is 500 milliseconds
Although this method can solve the issue of multiple execution events, it is not perfect. Finally, I found a solution in the form of jquery plug-in;
The Code is as follows:
/*
========================================================== ========================================================
WResize is the jQuery plugin for fixing the IE window resize bug
........................................ .......................................
Copyright 2007/Andrea Ercolino
-------------------------------------------------------------------------------
LICENSE: http://www.opensource.org/licenses/mit-license.php
WEBSITE: http://noteslog.com/
========================================================== ========================================================
*/
(Function ($)
{
$. Fn. wresize = function (f)
{
Version = '1. 1 ';
Wresize = {fired: false, width: 0 };
Function resizeOnce ()
{
If ($. browser. msie)
{
If (! Wresize. fired)
{
Wresize. fired = true;
}
Else
{
Var version = parseInt ($. browser. version, 10 );
Wresize. fired = false;
If (version <7)
{
Return false;
}
Else if (version = 7)
{
// A vertical resize is fired once, an horizontal resize twice
Var width = $ (window). width ();
If (width! = Wresize. width)
{
Wresize. width = width;
Return false;
}
}
}
}
Return true;
}
Function handleWResize (e)
{
If (resizeOnce ())
{
Return f. apply (this, [e]);
}
}
This. each (function ()
{
If (this = window)
{
$ (This). resize (handleWResize );
}
Else
{
$ (This). resize (f );
}
});
Return this;
};
}) (JQuery );
You can save the above Code as jquery. wresize. js to import the webpage, copy the following code to notepad, save it as a webpage, and then test it. Example:
The Code is as follows:
Test window resize