要素が画面内に入ったときに発火するイベント

[extusr]

ExtJS4 を勉強中のものです。
よろしくお願いいたします。

要素が画面内に入ったタイミングで処理をおこないたいと思っているのですが、
そのようなイベントもないようですし、手段が思いつかず手をこまねいています。

なにかアイディアをお持ちの方がいらっしゃいましたら、
どうかご教授願いたくお願い申し上げます。

[tenri-u]

「要素が画面内に入ったとき」
というのは何を指すんですか？

[extusr]

表現があいまいで申し訳ございません。

HTMLが読み込まれ、対象のタグをブラウザが描画したタイミングではなく、
描画されたタグがスクロールされ、実際画面内に表れたタイミングのことを指しています。

たとえば本ウェブページですと、大抵のクライアント環境では、最下部ｉにある

<p>&copy; 2012 Sencha Inc. All rights reserved.</p>

この要素はファーストビューに入りません。
画面をスクロールしていき、この要素が画面内に出現したときに、
なにかしらの処理をおこないたいのです。

なにとぞ、ご助言のほどよろしくお願い申し上げます。

[tenri-u]

そういうことでしたか。
ボディエレメントのscrollイベントをリスニングして、
ボディエレメントのgetScrollでスクロール量を調べて、
対象エレメントのgetTopなどと比較して画面内に入っているかどうかを判定する

ぐらいしか思いつきません。もっといい方法あるのかな。

[shobuno]

これって難しくないですか？

ブラウザが小さく表示されていて、ユーザーがブラウザの高さを大きくした場合にもイベントを発生させたいってことですよね。

tenri-uさんのやり方＋ウィンドウのサイズ変更イベントも取って処理しないと…

普通は「マウスが要素に入ったら」とかで処理しますからね･･･


ちなみに、具体的には何がしたいんですか？
別の方法で実現できるかもしれませんよ。

[extusr]

ご助言いただきましてありがとうございます。

アドバイスの内容をもとにいろいろと実験を続けていますが、
まだ成功には至っていない状況です。

具体的には、Ajaxで動的に読み込むコンテンツを、
画面に出力しなければならなくなったタイミングで読み込みたいのです。

ページの下部のほうにあって、ページを表示した時点では表示が不要なコンテンツについては、
読み込まないようにしたいという意図があります。

[shobuno]

ページの下部のほうにあって、ページを表示した時点では表示が不要なコンテンツについては、
読み込まないようにしたいという意図があります。

ん～こういうページは見たことが無いので何とも言えません。
私が考える対応策は2点です。


１．
　通常、ページの下の方にあるものは、Ajaxを遅延呼び出しにしてしまいます。
　そうすれば、画面上部にある物を先に読み込ませて、一定時間後に下の物の読み込みを開始します。

　よく、ページ読み込みの途中でいきなりスクロールバーが小さくなるのは、この処理をしていると思います。


２．
　要素全体(Bodyかな？)の高さと、スクロールバーの移動量を計算し、その値を元にAjaxを呼び出すようにする。
　そうすれば、Googleの画像検索のように、スクロールバーの移動量に応じて必要なデータが読み込めます。


googleの画像検索を見て思いましたが、「要素が画面に表示されてからAjaxを読み込む」では、
要素の表示が遅くなり、ユーザーは使いづらいと思います。
そのため、通常では「先読み」をするのではないでしょうか…？



こんな感じにしたいんじゃないのかな？実装方法は不明だけど…
ttp://www.flickriver.com/groups/1592737@N25/pool/interesting/


ご指摘、新案お待ちしております。


ちなみに、Flashなどは、使ったこと無いので良く判りません！

[extusr]

たくさんのご助言誠にありがとうございます。

ウィンドウサイズ監視とスクロール監視の組み合わせで、
どうにかやろうとこねくり回していましたが、最終的に、
先読みがないと使いにくいのでは、というご指摘のとおり、
今回は要件を見直し、またいずれチャレンジしようということになりました。

なんらかのシーンでは用途はありそうな予感がしますので、
また進展がありましたらこちらにてご報告申し上げます。

ご意見、アイディアをありがとうございました！