それではresize()を使って、ブラウザの高さをテキストに出力してみましょう。. © Copyright 2020 flatFlag. resize()は$(window)のみ対応しています。 セレクタに続けてresize()を指定し、引数のfunction()にリサイズされたときの処理を記述します。. ブラウザの幅や高さが変更されたら検知して処理してくれる便利なメソッドがresize()です。, セレクタに続けてresize()を指定し、引数のfunction()にリサイズされたときの処理を記述します。, 実際にこのブラウザの高さをリサイズしてみると、下記にブラウザの高さがテキストで出力されるかと思います。, 参考：jQueryで高さの取得と設定 私はバグなのか仕様なのか分からないので、2.2.4に戻しました。, $(window).on (‘load’)関数が動作しない時はjQueryのバージョンをチェック！. ところの[-]はマイナスですか？ jQuery(window).resize(function() { それともハイフンですか？, マイナスになります。 少し前に社内のメンバーから表題の件について相談を受けたことがあります。その時は「さぁ…、なんか面倒臭そうだし、ちょっと分かりませんわー。」と超絶冷たい応対をしてしまったわけですが、さっきふと閃いたことを試したところアッサ … var h = jQuery(window).height(); 一つ疑問に思ったのですが、 var areaY = ((winH-txtH) / 2) + 'px';の function Masonry_Reset() { $('#masonry_container').masonry({ itemSelector : '.item', columnWidth : 230, isAnimated : true, isFitWidth : true, animationOptions: { duration: 300 } }); } リセット処理の実行タイミングが問題. All rights reserved. 少し前に社内のメンバーから表題の件について相談を受けたことがあります。その時は「さぁ…、なんか面倒臭そうだし、ちょっと分かりませんわー。」と超絶冷たい応対をしてしまったわけですが、さっきふと閃いたことを試したところアッサリ実現できたので、備忘録としてここに書き記しておくとします。, windowオブジェクトに対してresizeイベントに対するリスナー関数を定義します。ここまではごく普通ですが、これだけだとウィンドウサイズをぐりぐり動かしている間にもリスナー関数内の処理が実行されてしまいます。そこで上記のようにsetTimeout() 用の変数を用意し、これの中身を都度チェックすることで処理したいコードを実行するかどうかを判別させるというわけです。, setTimeout() に指定した処理が実行されるまでの時間について少し考えてみます。FPS を 60 とすると1000msec / 16Hz = 16.6msec となり、1フレーム辺りの時間は約 16.6 ミリ秒です。つまり仮に setTimeout() に 16 と指定するとリサイズ操作が終わってから 16 ミリ秒後に処理が実行されるということになります。しかしこれは相当に高い目標値であり、実際に試してみてもとても期待通りには動きません。ウィンドウのリサイズはDOMの書き換えを引き起こす処理であり、当然描画されているDOMの数が多ければ再描画にかかる負荷も高くなります。具体的にどれくらいの値を指定するのが良いかはケースバイケースですが、最低でも上のコードにある数値以上を指定するのが良いでしょう。. 参考：text() でHTML要素にテキストを追加, ウインドウが読み込まれたときと、リサイズされたときの両方で同じイベントを設定してみましょう。. JavaScriptを使っていて、実行タイミングが想定通りにならないなんてことはありませんか？それはもしかしたら、JavaScriptのコードを書いている位置が原因かもしれません。この記事では、JavaScriptの読み込みタイミングについて注意すべきポイントを解説しています。 }); もしハイフンの場合は文字列となりクォーテーションが付きますのでそこで判断できますよ。. }); 2016年9月28日のwindowのリサイズ処理の記事を読んで、 ブラウザの高さを出力するサンプル. それ自体は悪いことではないのですが、リサイズが「完了」した時に一度だけ処理を実行したいようなケースもあると思います。そういった場合、何度も同じ関数がコールされてしまうのは無駄な処理です。処理の内容が重いものであればなおさらです。 例えば、ウィンドウのリサイズが完了� ただ、iphoneでリロードしたときにonloadが実行していない気がします。 jQuery('.js-sample01').text(h); 先日、load関数 $(window).on('load') がページの読み込みごとに動作したりしなかったりする謎の現象に悩まされました。どうやらキャッシュをクリアした時は正常に動作するのに、普通の更新では全く動作しない。コンソールを見てもエラーログは出ていない。 jQueryの読込み方法は色々とあります。 代表的な定義といえば、以下の書き方になります こちらはどの順番で動作するでしょうか？ 更に「head」前に定義するのと「body」終わりに定義するので順番の違いがあるのかを検証してみたいと思います。 「$(function(){});」と「$(document) 先日、load関数 $(window).on('load') がページの読み込みごとに動作したりしなかったりする謎の現象に悩まされました。, どうやらキャッシュをクリアした時は正常に動作するのに、普通の更新では全く動作しない。コンソールを見てもエラーログは出ていない。これまで通り記述しているのにconsole.log()さえ動かない…。, 専門的な細かいことまでは分かりませんが、 jQuery3での変更点を分かりやすくまとめてくれているQiitaのページを見てみると、, document-ready処理が追加された時点で既にreadyでも同期的に処理を行わず、あくまで非同期で処理を行うようになります。 jQuery 3.0はPromises/A+標準に従うようにしているからです。 documentがreadyかどうかにかかわらず、処理の順序の一貫性を保証できます。, とのことです。どういうことかというと、 ready関数と load関数の処理の順番が前まであやふや（？）だったのが、しっかりと分けて処理されるようになったみたい。（表現があっているか分かりません。私のイメージです。）, 基本的に、今までは関数の宣言以外、全部この ready関数の中に処理を書いていました。動いているから別にいいかと習慣になっていたのですが、これがダメポイントでした。, 上記のように、 $(function(){ }); の中で load関数を実行させている場合、痛い目に合います。笑 もともとこの記述はアウトなのかもしれないのですが、これで動いていたので私はいつもこうしていました。変数の管理が楽だったんです…。, ですので、これらの記述を次のように分けて書いてあげるだけで、今回の問題は解決しました。, 新しいバージョンを使用する時はしっかり変更点などの情報を集めないと痛い目見ますね。笑, コメントが短いとエラーになるんですね。バージョンの件助かりました。はまっていたんです。３以上でした。できた時はうれしかった。, はまってました。助かりました。 jQueryで要素を追加するいくつかの方法〜append,prepend,before,after,wrapなど. jQueryで、ページ読み込み完了後に仕掛けをする事がよくある。私は初めて「表示後にdivボックスの高さを調整しようとする処理を追加した」時にハマった。$(do… HTML jQuery(function() {