スマートフォンの登場からインターネットサイトはレスポンシブやサイズ可変が当たり前になり、制作サイドは構築にかかる時間と確認・検証に時間を膨大に奪われる状態になってしまいました。
ただ、そんなWEBサイトを利用するユーザーは、このようにちゃんとした画面構成が管理されているサイトは、どんな端末でも同じような操作感で利用できるのであれば、ストレス無く、便利に使うことができ、より生活が便利になったり、捜し物にかかる時間が短くなるので、恩恵を受けられるでしょう。
そんな制作側の開発工程において、cssで実装される@mediaの画面サイズごとのstylesheetでは制御できないものは、javascriptのonresizeを使って制御することになるのですが、スマートフォンの縦横変更ならイベント発生は大したことはないのですが、PCブラウザでブラウザアプリのウィンドウサイズを変更すると、１度だけイベントが実行されればいいだけの場合でも、大量のイベント数が実行されることになります。
これは、WEBブラウザの開発担当者であれば、周知の事実で、そのまま利用しているケースがほとんどだと思いますが、このonresizeとonscrollについては、mouseupやtouchendのような、処理が終わった事を判定するイベントが不足しているように考えられます。
ブラウザ画面のサイズを変更し終わったタイミングで、イベント発生することができれば、無駄なCPU消費を行わなくても済むし、scrollも動かなくなってから動作するだけで十分イベントの機能を果たすものも少なくありません。
そんなイベントは存在しないのですが、それに該当するコーディング方法を紹介したいと思います。
ソースコードと解説
window.addEventlistener("resize" , function(){
if(typeof window.event_flg !== "undefined" && window.event_flg !== null){
clearTimeout(window.event_flg);
window.event_flg = null;
}
this.event_flg = setTimeout(function(){
// ~~~実行コード
} , 300);
} , false);
このコードを実行すると、画面リサイズが終了した時に、"~~~実行コード"が起動します。
実際には、リサイズ終了時ではなく、0.3秒間リサイズイベントが発生しなければ、コード実行するという仕様になっています。
非常に簡単なコードですが、"window.event_flg"にsetTimeoutの実行IDを格納していて、300ms以内にその変数が残っていれば、clearTimeoutでsetTimeoutを無効にするようにしています。
変数名は何でもいいのですが、同じコードでonscrollにも対応できるので、resizeとscrollでフラグ変数名を変えておいたほうがいいかもしれません。
また、300msという値も、もっとゆっくりしたい場合は、大きい数値を登録すれば、簡単に対応可能です。
個人的には、こうしたコードを書いてイベント制御できるライブラリを作っておきたいので完成したら、ブログに掲載してGithubにアップしておきますので、ご要望があれば、コメント等でお伝え下さい。
0 件のコメント:
コメントを投稿