Home >Web Front-end >JS Tutorial >Solution to execute resize event multiple times in IE browser_jquery

Solution to execute resize event multiple times in IE browser_jquery

WBOYOriginal: 2016-05-16 18:04:491653browse

This is a very frustrating method every time you change the size of the page window. Especially in IE browser, if you move the window border slightly, events will be triggered many times. What's even more annoying is that when the resize event contains certain page content processing or calculations that cause the resize event to be triggered again, IE will randomly fall into a state of suspended animation.
I have been searching online for a long time, but all the same methods are reproduced everywhere; the following is a solution found online:

Copy code The code is as follows:

 
var resizeTimer = null; 
$(window).resize(function() { 
if (resizeTimer) clearTimeout(resizeTimer ; Problem, but not perfect, finally I found a solution in the form of a jquery plug-in; 

Copy code

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 and import it into the web page, copy the following code into Notepad, save it as a web page, and then test one time. Example: 

Copy code

The code is as follows:

test window resize