jQuery로 구현 된 회전식 메뉴가 있습니다.jQuery 및 CSS -> 디스플레이 연기
때때로 페이지에로드하는 데 시간이 걸릴 수있는 다른 것들이 있습니다. CSS 렌더링 없이는 회전식 캐 러셀이 표시되기 시작합니다. 이렇게하면 캐 러셀에있는 모든 이미지가 페이지에 표시됩니다.
~ 0.2 초를 모두 지정하면 CSS가 제대로 작동하고 캐 러셀이 올바르게 표시됩니다.
제 질문은 주변에 방법이 있거나 심지어 나머지 페이지가로드 될 때까지 회전식 표시를 지연시키는 "표준"방법이 있는지 제 질문입니다.
캐 러셀이 이미 document.ready에로드되도록 설정되었습니다.
캐 러셀이 구현 된 방법에 대해서는 언급하지 않았습니다. html 코드는 어떻게 보이고, jquery 플러그인은 사용 중인지, CSS는 어떻게 생겼는지 등의 질문에 대답하기가 어렵습니다.
jquery를 사용하여 페이지의 이미지 태그를 회전식 컨체너로 변환하는 것처럼 들립니다. 모든 이미지가 같은 div 안에 있으면 display : hidden을 사용하여 div를 숨기면됩니다. CSS가로드되기 전에 CSS 태그가 숨겨 지도록하려면이 CSS 설정을 속성으로 div 태그에 직접 적용해야합니다.
더 좋은 해결책은 페이지가로드 된 후에 javascript/jquery를 사용하여 이미지를 추가하는 것입니다. 그런 식으로 CSS 또는 jquery가 준비되기 전에 행으로 렌더링되지 않습니다.
자바 스크립트로 모든 이미지를 추가하면 자바 스크립트가 비활성화 된 사용자에게는 아무 것도 표시되지 않습니다. 따라서 회전식 캐 러셀이 너무 일찍 표시되는 경우 회전식 캐 러셀을 호출하는 스크립트를 페이지의 맨 아래로 옮길 필요가 있습니다. 페이지로드에
다음 rereference 수있는 자바 스크립트
.js .imgParent > img {
display: none
}
으로, referene 그 이미지를 켜과
은 사용자에게 회전 목마를 제한하지 않는, 몸에 JS에게 클래스를 추가 귀하의 자바 스크립트에있는 그 이미지와 그들을 다시 활성화 (자바 스크립트가없는 사용자는 일반 이미지가 표시됩니다)
정말, 결국 코드를 알 필요가 없습니다 참조하십시오. 완벽하게 좋은 답변입니다. 고맙습니다. – adergaard