検索

ホームページ >ウェブフロントエンド >jsチュートリアル >IEのbrowser_jqueryでサイズ変更イベントを複数回実行する解決策

IEのbrowser_jqueryでサイズ変更イベントを複数回実行する解決策

WBOY
WBOYオリジナル
2016-05-16 18:04:491646ブラウズ

これは、ページ ウィンドウのサイズを変更するたびに非常にイライラする方法であり、特に IE ブラウザでは、ウィンドウの境界線を少し動かすとイベントが何度もトリガーされます。さらに厄介なのは、サイズ変更イベントに、サイズ変更イベントの再トリガーを引き起こす特定のページ コンテンツ処理または計算が含まれている場合、IE はランダムに一時停止アニメーション状態に陥ることです。
長い間オンラインで検索していましたが、同じ方法がどこでも再現されています。次の解決策がオンラインで見つかりました:

コードをコピー コードは次のとおりです:

var assignTimer = null;
$(window).resize(function() {
if (resizeTimer) clearTimeout(resizeTimer) ; 問題はありますが、完璧ではありません。最終的に jquery プラグインの形で解決策を見つけました。



コードをコピーします。は次のとおりです:
/* ================================ ========== ======================================= WResize は、IE ウィンドウのサイズ変更バグを修正するための jQuery プラグインです ................................. ...................................................................... ... 著作権 2007 / Andrea Ercolino -- ---------------------------------- ---------------- -----------------------------
ライセンス: http://www.opensource.org/licenses/mit-license.php
ウェブサイト: http://noteslog.com/
================= ===================== ============================ ===============
*/
( function( $ )
{
$.fn.wresize = function( f )
{
バージョン = '1.1';
wresize = {fired: false, width: 0 };
関数 raiseOnce()
{
if ( $.browser.msie )
{
if ( ! wresize.fired )
{
wresize.fired = true ;
}
else
{
var version = parseInt( $.browser.version, 10 ) ;
wresize.fired = false;
if (バージョン {
return false;
}
else if ( version == 7 )
🎜>//垂直方向のサイズ変更は 1 回、水平方向のサイズ変更は 2 回実行されます。
var width = $( window ).width();
if ( width != wresize.width )
{
wresize .width = width;
return false;
}
}
}
}
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 ); 上記のコードは jquery.wresize として保存できます。 .js を作成して Web ページにインポートし、次のコードをメモ帳にコピーして Web ページとして保存し、一度テストします。例:




コードをコピー


コードは次のとおりです:




テスト ウィンドウのサイズ変更