レスポンシブでサイト制作していると、jQueryやjavascriptでもウィンドウ幅や高さのサイズの変更を動的に取得して処理を実行したいということがでてくると思います。
そこで今回は、ウィンドウがリサイズされたことを判定して処理を実行する方法をご紹介します。
また、以前「ページ読み込み時にjavascript(jQuery)を実行する方法」という記事を書きましたが、この方法だけだと、当然ブラウザ画面がリサイズされても再処理されることがありませんでした。今回は、これらを同時に設定する便利な方法も合わせてご紹介しますので是非最後までご確認ください。
ブラウザのウインドウがリサイズされたときに処理を実行
|
1 2 3 |
$(window).resize(function() { //ここにブラウザのウィンドウがリサイズされたときに処理する内容を記述 }); |
JQueryではブラウザ読込み後にイベントを実行する目的として一般的に「$(function(){ //処理する内容 });」や「jQuery(function(){ //処理する内容 });」がよく使われますが、ブラウザウィンドウの幅や高さのサイズが変更されたときにイベントを実行したい場合は、これらの代わりに「$(window).resize」を使います。
読み込み時とリサイズ時の設定を同時にする方法
「$(window).resize」はブラウザウィンドウのサイズが変化したタイミングのみ処理が実行される指定なので、読込み時も同じ処理を実行したい場合は別で設定する必要があるのですが、これらをまとめて設定する方法もあります。
|
1 2 3 |
$(window).on('load resize', function(){ // 処理する内容 }); |
上記のように設定することで「$(window).on(‘load’, function ())」と「$(window).resize」、両方を設定したことになります。「$(window).on(‘load’, function ())」は画像等のコンテンツ全ての読み込み終了後にイベントを実行する設定になりますが、「$(window).resize」と併用する処理の場合幅や高さなど取得して処理するイベントが多くなりがちなのでタイミングとしては最適です。
$(window) load、resizeの注意点
「$(window).resize」は「$(function(){ //処理する内容 });」などの中に設定しても動作するのですが、「$(window).on(‘load resize’, function(){～」を「$(function(){ //処理する内容 });」内に設定した場合jQuery3.0以降で読込み時の処理のみ効かなくなります。ですので、「$(window).on(‘load resize’, function(){～」を使う場合はかならず「$(function(){ //処理する内容 });」の外に設置するようにしてください。
「$(window).resize」に関しては「$(function(){ //処理する内容 });」があってもなくても動作するのですが、私個人的には「そもそもどっちも処理するタイミングを指定するものなのだから$(function(){ ～});の中に入れない方がややこしくならなくていい」と考えています。別になにが正解ってないことなので参考程度に。
関連記事
