점진적인 개선, 페이지가 아직 완전히 로드되지 않은 경우의 동작

Question

저는 완전히 jQuery로 구현된 점진적인 향상을 사용하여 사이트를 개발하고 있습니다.

예를 들어, SoundManager를 사용하여 연결된 MP3 파일을 "인라인"으로 재생하고 $(document).ready(function())을 통해 Youtube 링크에 대한 Youtube 플레이어를 팝업하기 위해 앵커 태그에 동적으로 onclick 이벤트 핸들러를 추가합니다.

그러나 페이지가 로드되는 동안 사용자가 이를 클릭하면 여전히 향상되지 않은 버전이 표시됩니다.

관련 항목을 숨기는 방법에 대해 생각해 보았습니다(디스플레이를 통해:없음 또는 이와 유사한 것) 로드할 때 표시하거나 모달 "로딩" 대화 상자를 표시하지만 둘 다 해킹처럼 들립니다.

더 좋은 아이디어가 있나요?나는 여기서 완전히 명백한 것을 놓치고 있다고 생각합니다.

문안 인사,

알렉스

Answer 1

나는 이것을 테스트하지 않았지만 시도해 볼 수 있습니다 live.클릭 핸들러를 document.ready 외부에 배치하여 즉시 실행되도록 할 수 있다고 생각합니다.부터 live 용도 이벤트 위임 해당 기능을 구현하기 위해 DOM이 준비될 때까지 기다릴 필요가 없으며 페이지가 로드되는 동안 발생한 모든 클릭은 여전히 ​​이벤트 핸들러에 의해 캡처되어야 합니다.

그래도 작동하지 않으면 바인딩해야 하는 항목 바로 아래에 Javascript 스크립트 태그를 넣어 볼 수 있습니다.예쁘지는 않지만 문제가 거의 해결될 것입니다.

Answer 2

당신이 좋은 판단을 사용했다고 가정하고 사람들이 지연이 너무 길어서 사용하지 않는 버전에 빠지고 있다고 가정하면 CSS 컨트롤을 비활성화합니다. CSS는 거의 즉시로드됩니다. 그런 다음 JavaScript를 사용하여 CSS를 전환하여 컨트롤을 다시 활성화합니다.

그러나 첫 번째 반응은 페이지가로드되는 동안 사용자가 클릭하면 페이지 나 연결이 너무 느립니다. 그러나 이것이 거의 1% 이하의 경우가 거의 없다면, 사용자가 자신의 목표를 달성 할 수있는 한, 그의 음악을 듣는 한 그것을 으 rug 할 수 있습니다. 나는 사용자가 5 초 후에 더 나은 경험이 기다리고 있다는 것을 알게되면 일반적으로 JavaScript가 렌더링 된 다음 클릭 할 때까지 기다릴 것입니다.

Answer 3

CSS 사용과 관련하여 Aleeemb의 반대 자세를 취합니다. CSS를 사용하여 컨트롤을 비활성화하는 경우 JavaScript가 장애가 있거나 접근성 소프트웨어를 사용하는 사람은 스타일을 완전히 비활성화하지 않고 해당 컨트롤을 사용할 수 없습니다.

Closing Body 태그 직전에 매우 작은 인라인 JavaScript를 사용하여 JS를 통해 요소를 정말 빠르게 숨길 수 있습니다. 인라인이고 외부 리소스를로드 할 필요가없는 경우 일반적으로 사용자가 클릭 할 수있는 것보다 빠르게 빠릅니다.

그러나 나는 하다 Aleeemb는 사용자가 페이지를 정신적으로 처리하고 JS가로드되기 전에 클릭하려는 컨트롤로 만들 수 있다면 페이지로드하는 방식에 더 깊은 문제가있을 수 있습니다. 로드 시간을 줄이는 방법을 살펴보십시오 : 이미지 파일 압축, html/css/js 파일을 gzipping, 자바 스크립트를 최소화하고 이미지를 스프라이트에 결합하는 등.

Answer 4

나는 다음을 제안 할 것이다 Paolo Bergantino의 조언 - 이벤트 대표단은 문제를 완전히 피하는 방법입니다.

이벤트 대표단이 일을 할 수없는 비슷한 문제가있었습니다. 여기에 대해 읽으십시오.