jQueryで、読み込みとリサイズ処理を一緒にと、ロードとリサイズ処理を一緒に書く方法

jQueryでロードとリサイズを一緒に書く方法のご紹介です。

$(function() {
  $(window).on("load resize", function() {
    // ロードとリサイズ時の処理
  });
});

次に読み込み時とリサイズした時に同じ処理を行う方法です。

$(function() {
  size();
  $(window).on("resize", function() {size();});
  function size() {
    // 読み込み時とリサイズ時の処理
  }
});

これを使って、デモを作ってみます。
ウィンドウサイズを変えると数字と色が変わります。

DEMO

ウィンドウの高さや幅を縮めたり大きくしたりすると数や色が変わるよ！

HTML

<div class="demo1">
    <span></span>
    <span></span>
    <span>ウィンドウの高さや幅を縮めたり大きくしたりすると数や色が変わるよ！</span>
</div>

CSS

  .demo1 span {
    font-size: 20px;
    color: #fff;
    text-align: center;
    padding: 8px 24px;
    margin-bottom: 2%;
    border-radius: 6px;
    display: block;
    -webkit-transition: .2s ease-out;
    transition: .2s ease-out;
  }
  .demo1 span:last-child {
    color: #515151;
    font-weight: bold;
  }

jQuery

$(function() {
  // 幅と高さを使いまわせるよう、グローバル変数にしておく
  var width, height, random;
  // 色を配列に格納
  var c = ["#e94d4d", "#4253ed", "#2de48c", "#d5f127", "#ed4285", "#8342ed", "#42c4ed", "#42edd4", "#ed42d2", "#6fed42", "#ed8542"];
  // 色の配列の数を格納
  var c_num = c.length;

  // 読み込み時とリサイズ時に同じ処理をする
  size();
  $(window).on("resize", function() {size();});

  // 処理内容
  function size() {
    width = $(window).width();
    height = $(window).height();
    random = Math.round(Math.random() * c_num);
    $(".demo1 span").eq(0).css({background: c[random]}).text("現在のウィンドウの幅は" + width + "pxです。");
    random = Math.round(Math.random() * c_num);
    $(".demo1 span").eq(1).css({background: c[random]}).text("現在のウィンドウの高さは" + height + "pxです。");
  }
});