UpdatePanel - UIのちらつ​​きを避ける方法に関するアイデアはありますか？ - ASP.NET/Jquery

Question

私はむしろ複雑なUIを持っています。しかし、この質問の目的のために、デフォルトでUILayout1をレンダリングするHTMLテーブルがあるとしましょう（デフォルトモード）。ユーザーがデフォルトモードとプレビューモード（UILayout2）を切り替えるために使用できるボタンがあります。

プレビューモードでは、表に不可視で列の順序が変更されている列があります。私はロード時にJS（jquery）を使用してモードをチェックし、それに応じて変更しています。

テーブルとトグルボタンはUpdatePanelsにあります。

機能上、すべて正常に動作します。ただし、ユーザーがデフォルトモードとプレビューモードの間で切り替えたり、その逆の切り替えを行ったりすると、表がデフォルトでレンダリングされ、その後JSが実行されて変更が実行されます。

この結果、UIエクスペリエンスが低下します。この「ちらつき」を避ける創造的な方法はありますか？

Answer 1

あなたはdivを使用することができますか、問題はあなたのコードがロード上で実行されていることである可能性が高い他

Answer 2

任意の概念を使用して、あなたのUIの生成に更新パネルを使用しないでください。私は、ロード時にコードを実行し、ウィンドウのonloadイベントを使用しない標準のjQueryメソッドを使用してこれを行うと仮定しています。いずれにしても、jQueryの$(document).ready(...)を使用しても、JavaScriptのインクルードがすべてロードされるまで.readyイベントが発生しないため、ロードする他のjavascriptファイルがたくさんある場合は遅すぎます。

あなたはつまり、あなたが$(document).ready(...);

でそれをラップしていないことを確認してください、あなただけのあなたのページの表のHTMLの後にテーブルを変更するコードと負荷にそれを実行していないなどのことで問題を回避することができるはずです

このアプローチを使用するには、ページの前半に含まれている表を変更しているコードで必要なすべてのjavascriptを用意する必要があります。

その他の重要でないJavaScriptファイルが含まれている場合は、後でそれらのファイルをページに含めるようにしてください。

私は、アップデートパネルの中にどのように影響するかを確信していません - アップデートパネルが更新されたときにコードが再トリガされていることを確認する必要がありますが、

Answer 3

おそらくあなたのUIはCSSによって制御されていますか？あなたのプレビューに適用されますあなたのCSSルールを変更する場合は、

if (previewMode) { 
    document.documentElement.className = 'preview'; 
} 

：あなたは、あなたのHTMLの<ヘッド>あなたのJavaScriptの開始時またはでこのような何かを追加することにより、ちらつきを取り除くことができるかもしれません

.preview table .defaultMode { 
    display:none; 
} 

うまくいけば、あなたのテーブルが正しく初めてレンダリングする必要があり、再描画する必要はありません。のようなものにクラス=「プレビュー」を持つHTML要素を反映するモード。