이 상황에서 대형 폼의 디스플레이를 향상시키는 방법은 무엇입니까?

Question

많은 요소가있는 큰 양식을 만들었습니다. 이 양식을 만들기 위해 자바 스크립트 (jquery)를 사용하여 단계별 효과가 있습니다. 문제는 페이지가로드 중이고 자바 스크립트 비헤이비어가 트리거되기 전에 양식이 엉망으로 표시되고 모든 요소가 표시된다는 것입니다. 이것을 개선하기위한 아이디어가 있습니까?

Answer 1

이 동작에 대한 일반적인 용어는 "unstyled content flash"입니다 (솔루션을 검색 할 때 유용합니다). 기술적으로 콘텐츠 에의 스타일이 지정되어 있지만 (페이지가 올바르게 구성되고 구문 분석되었다고 가정) JavaScript는 추가 스타일 규칙을 적용하고 있으며 페이지가로드 될 때까지는 그렇게하지 않습니다.

내가 정기적으로 사용하는 기술 중 하나는 요소를 display:none으로 설정하고 작업 할 준비가 될 때까지 사용하는 것입니다. 요소가 표시되고 특정 코드 조각이 작동하는 데 필요한 표시 상자가 있어야하기 때문에 항상 실용적인 것은 아닙니다.

아이디어를 얻으려면 this article을 참조하십시오.

Answer 2

숨겨진 div (스타일 : display : none)의 모든 양식 요소를 그룹화하고 "로드 중"메시지가 표시됩니다.

문서로드가 완료

사용하여 "시작"기능 어떤 종류의 트리거

$(document).ready(function() { 
    //unhide the form here 
})