2

これは本当に具体的なニーズです。基本的に、約 20 個の DOM オブジェクトのいずれかが高さまたは幅を変更するタイミングをリッスンしたいと考えています。この変更は、ウィンドウのサイズ変更、含まれるコンテンツの変更、または DOM オブジェクトで動作する JavaScript によって発生する可能性があります。

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

オブジェクトのサイズが変更されているかどうかをポーリングする必要があります。これは非常にコストがかかり、オブジェクトをミラーリングしようとすると非常に顕著な遅延が発生します。

それで、私の質問: DOM オブジェクトのサイズが変更されたときにイベントを発生させる最もパフォーマンスの高い方法は何ですか?

長い質問で申し訳ありません。また、純粋な CSS でこれを達成しようとは特に考えていません。これは実験の一部です。

返信する時間があれば誰にでも感謝します!

4

2 に答える 2

2

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

これは、例によってその問題を解決する約6か月前に作成したGUIです： http://prettydiff.com/jsgui/

于 2012-03-24T23:04:23.567 に答える
0

最もパフォーマンスの高い方法は、ブラウザーにオブジェクトのサイズを自動的に合わせさせる HTML/CSS レイアウトを使用することです。あなたのケースでそれがどのように行われるかをアドバイスするには、正確な HTML を提示する必要があります。

お気づきのように、個々のオブジェクトのサイズ変更を直接監視するための適切な通知はありません。サイズ変更につながる可能性のあるすべてのイベントを監視し、以前に保存したサイズに対して各オブジェクトを自分で手動でチェックするか、2 つのオブジェクトを比較して一致するかどうかを確認するのが最善の方法です。これでラグのないエクスペリエンスが得られるとは限りませんが、javascript ソリューションでできることとほぼ同じです。

于 2012-03-24T23:08:07.900 に答える