Solution to executing the resize event multiple times in IE browser _ jquery

Source: Internet
Author: User
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.