7

$.resize()ブラウザによっては、ウィンドウの実際の「サイズ変更」なしで、ページの読み込み時にjQueryのイベントが発生することに気付きました。

1回だけでなく、2回発射されることもあります。(Chrome 30.0.1599.101 m でのロード時、Opera でのサイズ変更時...)

これは正常な動作ですか？すべてのブラウザーのサイトの読み込み時にこの動作を統一する方法はありませんか?

resizeサイズ変更が既に終了したときに（interval を使用して）一度だけ呼び出していますが、これではChromeのロード時にイベントが発生するという問題は解決しません。

この問題を再現するフィドルを作成することはできませんでしたが、次のようなファイルでこの動作をテストできます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
    $(window).resize(function() {
        alert("Fired!");
    });
</script>
</head>
<body>

</body>
</html>

このイベントは、Chrome でページを初めてロードしたときに発生します。リフレッシュしても起動されません。

4

3 に答える 3

0

簡単な解決策は次のとおりです。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
    var windowResize={
        width:0,
        init:function() {
            this.width=$(window).width();
        },
        checkResize:function(callback) {
            if( this.width!=$(window).width() ) {
                callback.apply();
            }
        }
    };
    windowResize.init();
    $(window).resize(function() {windowResize.checkResize(function() {
            console.log("Fired!");
        });
    });
</script>
</head>
<body>

</body>
</html>

まず、上記の windowResize オブジェクトのようなオブジェクトを作成します。windowResize.init() は、ウィンドウの幅を測定し、値を windowResize.width に格納します。次に、$(window).resize() で目的のコールバック関数を使用して windowResize.checkResize() を呼び出します。windowResize.checkResize() は、現在のウィンドウの幅をチェックし、保存された値と比較して、幅の値が異なる場合にのみコールバックを起動します。

于 2013-10-28T14:43:50.620 に答える