IE browser_jquery에서 크기 조정 이벤트를 여러 번 실행하는 솔루션
- WBOY원래의
- 2016-05-16 18:04:491626검색
이는 페이지 창의 크기를 변경할 때마다 매우 답답한 방법입니다. 특히 IE 브라우저에서는 창 테두리를 조금만 이동하면 이벤트가 여러 번 발생합니다. 더 짜증나는 점은 크기 조정 이벤트에 크기 조정 이벤트가 다시 트리거되도록 하는 특정 페이지 콘텐츠 처리 또는 계산이 포함되어 있으면 IE가 무작위로 애니메이션 일시 중지 상태에 빠진다는 것입니다.
오랫동안 온라인에서 검색했지만 동일한 방법이 어디에서나 재현됩니다. 다음은 온라인에서 찾은 솔루션입니다.
코드 복사 코드는 다음과 같습니다.
var resizeTimer = null
$(window).resize(function() {
if (resizeTimer)clearTimeout(resizeTimer) ; 문제가 있지만 완벽하지는 않습니다. 마침내 jquery 플러그인 형태로 해결책을 찾았습니다.
코드 복사
다음과 같습니다: /* =============================== ========== ======================================= WResize는 IE 창 크기 조정 버그를 수정하기 위한 jQuery 플러그인입니다
................................ ................ ................................. ... Copyright 2007 / Andrea Ercolino
-- --------------------- --- ----------------
라이센스: http://www.opensource.org/licenses/mit-license.php
웹사이트: 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 ( 버전 < 7 )
{
return false
}
else if ( 버전 == 7 )
🎜>//세로 크기 조정은 한 번 실행되고, 가로 크기 조정은 두 번 실행됩니다.
var width = $( window ).width()
if ( width != wresize.width )
{
wresize .width = width;
false 반환
}
}
}
}
true 반환
}
function handlerWResize( e )
🎜>if ( resizeOnce() )
{
return f.apply(this , [e])
}
}
this.each( function()
{
if ( this == 창 )
{
$( this ).resize( handlerWResize )
}
else
{
$( this ).resize( f ) ;
}
} );
return this;
} ) ( jQuery )
위 코드를 jquery.wresize로 저장할 수 있습니다. .js를 다운로드하여 웹 페이지로 가져오고 다음 코드를 메모장에 복사한 후 웹 페이지로 저장한 후 한 번 테스트해 보세요. 예:
코드 복사
-- --------------------- --- ----------------
라이센스: http://www.opensource.org/licenses/mit-license.php
웹사이트: 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 ( 버전 < 7 )
{
return false
}
else if ( 버전 == 7 )
🎜>//세로 크기 조정은 한 번 실행되고, 가로 크기 조정은 두 번 실행됩니다.
var width = $( window ).width()
if ( width != wresize.width )
{
wresize .width = width;
false 반환
}
}
}
}
true 반환
}
function handlerWResize( e )
🎜>if ( resizeOnce() )
{
return f.apply(this , [e])
}
}
this.each( function()
{
if ( this == 창 )
{
$( this ).resize( handlerWResize )
}
else
{
$( this ).resize( f ) ;
}
} );
return this;
} ) ( jQuery )
위 코드를 jquery.wresize로 저장할 수 있습니다. .js를 다운로드하여 웹 페이지로 가져오고 다음 코드를 메모장에 복사한 후 웹 페이지로 저장한 후 한 번 테스트해 보세요. 예:
코드 복사
코드는 다음과 같습니다.