UpdatePanel - UI에서 깜박임을 피하는 방법에 대한 아이디어가 있습니까? - ASP.NET/Jquery

Question

나는 다소 복잡한 UI가 있습니다. 그러나이 질문의 목적을 위해, UILayout1을 기본으로 렌더링하는 HTML 테이블이 있다고 가정 해 봅니다 (기본 모드라고 함). 사용자가 기본 모드와 미리보기 모드 (UILayout2) 사이를 전환하는 데 사용할 수있는 버튼이 있습니다.

미리보기 모드에서 보이지 않는 열과 행의 순서가 변경되는 테이블 열이 있습니다. 로드시 JS (jquery)를 사용하여 모드를 확인하고 적절하게 변경합니다.

테이블과 토글 버튼은 UpdatePanels에 있습니다.

기능상 모든 것이 예상대로 작동합니다. 그러나 사용자가 기본 모드와 미리보기 모드간에 전환하거나 그 반대로 전환하는 경우에는 표가 기본적으로 렌더링되고 JS가 실행되어 변경되는 짧은 시간 간격이 있습니다.

이로 인해 UI 사용 경험이 저하됩니다. 이 "깜박임"을 피할 수있는 창의적인 방법이 있습니까?

Answer 1

당신 된 DIV를 사용하거나 문제는 코드가로드에서 실행되고 있는지 될 가능성이 다른

Answer 2

어떤 개념을 사용하여 UI 생성에 업데이트 패널을 사용하지 마십시오. 로드 할 때 코드를 실행하고 윈도우의 onload 이벤트를 사용하지 않는 표준 jQuery 메서드를 사용하여이 작업을 수행한다고 가정합니다. 어쨌든 jQuerys $(document).ready(...)을 사용하더라도 모든 자바 스크립트가 포함될 때까지 .ready 이벤트가 문서에서 실행되지 않으므로로드 할 다른 자바 스크립트 파일이 너무 많으면 속도가 느려집니다.

당신은 예를하게 부하를 실행 당신의 페이지에있는 테이블의 HTML 후 테이블을 수정하는 코드를 포함하고하지 않음으로써 문제를 해결할 수 있어야합니다 확인 당신은 $(document).ready(...);

에 포장하지 않는다

이 접근 방식을 사용하려면 페이지의 앞부분에 포함 된 표를 수정하는 코드에 필요한 모든 자바 스크립트가 있어야합니다.

기타 필수 JavaScript 파일이 포함되어있는 경우 나중에 페이지에 포함시켜야합니다.

업데이트 패널 내부에서 어떻게 영향을 미치는지 확신 할 수 없습니다. 업데이트 패널을 업데이트 할 때 코드가 다시 트리거되는지 확인해야하지만, 자동으로 실행되어야합니다.

Answer 3

아마도 UI가 CSS에 의해 제어됩니까? 당신이 당신의 미리보기에 적용하여 CSS 규칙을 수정하면 다음

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

: 당신은 당신의 HTML의 < 머리 > 자바 스크립트의 시작 또는이 뭔가를 추가하여 깜박임을 제거 할 수있을 것

이

.preview table .defaultMode { 
    display:none; 
} 

희망 테이블이 제대로 처음으로 렌더링해야 다시 그릴 필요가 없습니다 : 모드는 같은 것으로 클래스 = "미리보기"를 갖는 HTML 요소를 반영합니다.