jquery 메가 메뉴가 너무 느리게로드되는 이유는 무엇입니까?

Question

나는 query Mega menu을 사용하고 있는데 내 페이지가로드 될 때 렌더링 될 때 처음에는 모든 메뉴 (하위 메뉴 포함)가 표시되고 하위 메뉴는 사라지고 정상적인 수평 남성처럼 보입니다. 그것은 결국 적재되어 보이지만 적절하지는 않지만 매우 혼란스럽고 조금 이상해 보입니다. 위의 예제 페이지에서이를 복제 할 수 있습니다. 그 바로 렌더링 후 메뉴를 숨기려고

그것의 거의

이 불안해 증가 렌더링없이이 메뉴로드 "청소기"가 할 수있는 방법이 있는지

사람이 알고 있나요?

Answer 1

$ .ready() 래퍼를 사용하여 이니셜 라이저를 호출하는 경우 메뉴를 준비하기 전에 전체 페이지가 완전히로드 될 때까지 기다립니다.

1. 숨기기 initalization 이전에 CSS를 사용하여 메뉴 : 당신은 두 가지 옵션이 있습니다.

2. 마크 업 직후에 메뉴를 초기화하십시오. 여기

은 예입니다

<ul id="menu"> 
    <li>...</li> 
    ... giant menu ... 
</ul> 
<script type="text/javascript"> 
    $('#menu').giantMenu(); 
</script> 

편집 : 더 많이 ... 이상적인 정말 자바 스크립트를 비활성화하고 페이지가 어떻게 보이는지 확인하는 것입니다

. 귀하의 페이지가 정상적으로 보일 수 있도록 자바 스크립트에 의존해서는 안됩니다. 메가 메뉴가 초기화하는 동안 추가하는 몇 가지 클래스를 추가하는 것만 큼 간단 할 수도 있습니다.

Answer 2

이것은 FOUC라고하며, CSS를 통해 메뉴를 올바르게 스타일링하면 피할 수 있습니다. 그렇게하면 브라우저가 필요한 모든 .js 파일을로드하는 데 시간이 걸리는 것은 문제가되지 않습니다.