jQueryで初回読み込み完了時とウインドウリサイズ時に処理をする方法

window.md

久々の更新になってしまったので、軽い話題を。レスポンシブWebデザインをやるようになると、ウインドウ幅が変わったタイミングで処理をしたいときがあります。そのコードをメモしておきます。

$(window).load

$(window).loadは「そのページが完全に読み込まれたら実行したい時」に使います。

$(window).load(function () {
    //ここに処理
});

$(window).resize

$(window).resizeは、「ウインドウ幅が変更された時」に使います。

$(window).resize(function() {
    //ここに処理
});

これらを統合する

一般的なホームページの時、読み込み時に一度処理をして、その後ウインドウ幅が変わった時に随時処理をすることになります。そのため、以下のように統合して使います。

$(window).load(function () {
    //ここに処理
});
$(window).resize(function() {
    //ここに処理
});

さらに見やすくする

基本上記コードで動作は問題ありません。ただfunction ()、function ()と非常に見づらいですよね。 もう少しすっきり書いてみます。

$(window).on({
    'load resize': function(){
        //ここに処理
    }
});

//loadとresizeで、処理が異なる場合は
$(window).on({
    'load': function(){
        //ここにA処理
    },
    'resize': function(){
        //ここにB処理
    }
});

「ウインドウ$(window)に対してjQueryの.on()を行う」と読むとわかりやすいと思います。

さらにload やresizeはjQueryでは一度に記述することもできます。

今回のつみかさね

jqueryは普通に書くとあっという間にコードがカオスなことになるので、なるべくわかりやすく書きたいですね。

[asin:4048913913:detail]