【jQuery】読み込み時、リサイズ完了時に取得したウィンドウサイズに応じて処理を実行する

こんにちは、Ryohei（@ityryohei）です！

jQueryで読み込み時とリサイズ完了時に、ウィンドウサイズに応じて処理を実行する方法のご紹介になります。

本記事の内容

ウィンドウサイズを取得する
読み込み時、リサイズ時のイベントを取得する
ウィンドウサイズに応じて処理を実行する

では解説していきます。

ウィンドウサイズを取得する

ウィンドウサイズは以下の記述で取得します。

JS

$(window).width();

読み込み時とリサイズ時のイベントを取得する

on()メソッドで読み込み時とリサイズ時のイベントを取得します。

JS

$(window).on('load resize', function() {
  //ここに読み込み時とリサイズ時の実行したい処理を記述する
});

読み込み時とリサイズ時にウィンドウサイズを取得して処理を実行する

on()、width()を使って処理を記述します。

JS

$(window).on('load resize', function() {

  //ウィンドウサイズを取得する
  var w = $(window).width();

  //ウィンドウサイズが768より大きい場合の処理
  if( w > 768 ) {
    console.log('ウィンドウサイズは768より大きいです。');

  //ウィンドウサイズが768以下の場合の処理
  } else {
    console.log('ウィンドウサイズは768以下です。');
  }
});

上記を実行するとおわかりいただけると思いますが、リサイズ時のイベントをすべて取得して処理を実行しているだけなので、コンソールに大量の文字列が表示されます。リサイズ完了時のみ処理が実行されるようにスクリプトを修正します。

読み込み時、リサイズ完了時に取得したウィンドウサイズに応じて処理を実行する

以下、リサイズ完了時のみ処理が実行されるように修正したスクリプトになります。

Demo

JS

$(document).ready(function() {
  var checkResize;
  $(window).on('load resize', function() {
      clearTimeout( checkResize );
      checkResize = setTimeout( resizing, 100 );
  });

  //リサイズ完了時に実行する処理
  function resizing() {
    var w = $(window).width();

    //ウィンドウサイズが768より大きい場合の処理
    if( w > 768 ) {
      console.log('ウィンドウサイズは768より大きいです。');

    //ウィンドウサイズが768以下の場合の処理
    } else {
      console.log('ウィンドウサイズは768以下です。');
    }
  }
});

setTimeoutは2つ目の引数にしてした時間に1つ目の引数に設定した処理を予約する関数です。clearTimeoutはsetTimeoutで予約した処理をキャンセルします。ウィンドウサイズがリサイズされた際にcheckResizeの値に新しいsetTimeoutが予約されるため、連続して処理が実行されないようになります。