2012-03-24 8 views
2

これは本当に特別な必要です。基本的には、約20個のDOMオブジェクトのいずれかが高さや幅を変更したときに聴きたいと思います。この変更は、ウィンドウのサイズ変更、コンテンツの内容の変更、またはDOMオブジェクトに作用するJavaScriptによって引き起こされる可能性があります。domオブジェクトのonresizeをチェックする最も効果的な方法

IEは、ビューポートだけでなく、すべてのDOMオブジェクトに対してonresize()を提供します。このイベントは非常に効率的です。実際には、関数onresize()を呼び出すことができ、関数は関連DOMオブジェクトのサイズ変更中に連続的に起動します。たとえば、オブジェクトの高さとonresize()を一致させるために別のDOMオブジェクトを調整することができます。オブジェクトの高さは、サイズ変更されたオブジェクトの高さが高くなるようにアニメーション化されている場合でも、驚くばかり。しかし、IEを除くすべてのブラウザでは、onresize()はビューポートのサイズ変更(ブラウザ/フレーム)でのみ機能します。シャックス。

オブジェクトがサイズ変更されていて、非常に高価で、オブジェクトをミラーリングしようとしているときに非常に目立つ遅延を与えている場合、ポーリングが残っています。

私の質問:DOMオブジェクトのサイズを変更したときにイベントを発生させる最も効果的な方法は何ですか?

ご迷惑をおかけして申し訳ありません。また、私は特に純粋なCSSでこれを達成するために探していません。これは実験の一部です。

お返事ありがとうございました!

+0

jsfiddleを投稿できますか? – elclanrs

答えて

2

後でクロージャで参照される変数に幅と高さを格納します。必要なイベントが発生すると、clientHeightプロパティとclientWidthプロパティを変数に格納されているものと比較します。ここで

は一例で、その問題を解決し、私は約6ヶ月前に作られたGUIです:http://prettydiff.com/jsgui/

+0

素晴らしいリソース、共有いただきありがとうございます! – elclanrs

+0

@austincheney - そのURLに感謝します。私が持っている問題は、通常のイベントがないことです。 onclick、onmouseover。動作するものはonresizeですが、私が説明したように、少なくともすべてのDOMオブジェクトでクロスブラウザーは動作しません。これは、オブジェクトの高さ/幅が変更されたかどうかを常にチェックしておかなければならないことを意味します。これは高価で比較的遅くなる可能性があります。 – RogerRoger

+0

@RogerRogerおそらくonfocusイベントとonblurイベントを使いたいと思うでしょう。 – austincheney

0

最もパフォーマンスの方法は、オブジェクトが自動的に一致するサイズにブラウザを取得するHTML/CSSレイアウトを使用することです。お客様のケースでどのように行われるのかアドバイスするために、正確なHTMLをGoogleに提示しなければなりません。

あなたが発見したとおり、個々のオブジェクトのサイズ変更を直接監視する良い通知はありません。できるだけ多くの可能なイベントを監視して、サイズ変更につながる可能性があるすべてのイベントを監視し、それぞれのオブジェクトを以前に保存したサイズに対して手動でチェックするか、2つのオブジェクトを比較して一致するかどうかを確認します。それはおそらくあなたのラグフリーの経験を得ることはありませんが、それはあなたがjavascriptソリューションで行うことができるほど良いでしょう。

+0

私は、HTML/CSSがより効果的であることを認識しています。しかし、それは私が意図的に取っているアプローチではありません。 オブジェクトが変更されたときにいつでもイベントを発生させる方法があるので、それをポーリングする必要はありません。しかし、おそらく不可能かもしれません。 – RogerRoger

+0

@RogerRoger - そのようなイベントは認識していません。 – jfriend00