누군가 특정 링크를 클릭하면로드 대화 상자를 표시하는 방법은 무엇입니까?

Question

로드가 매우 느린 웹 페이지를 여는 URL이 있는데 그 URL을 제어 할 수 없습니다.

누군가이 URL을 클릭하거나 오버레이 div가있는 페이지를 차단하면 로딩 대화 상자를 표시하고 싶습니다.

참고 : 이것은 아약스 관련 질문과는 다른 질문입니다. 일반 URL 클릭에 대해서는 사용자를 구성하는 것이지 특정 URL 만 클릭하는 것은 아닙니다.

<A href="http://veryslowload.com" onClick="...">slow load...</a> 

내가 찾고있는 것은 onClick을 넣는 것입니다.

Answer 1

모달 상자를 살펴볼 수 있습니다. Ajax 요청이 전송되고 성공하면 모델 상자를 닫을 수 있습니다.

$(function(){ 
​ $('a').click(function(){ 
    $('<div class=loadingDiv>loading...</div>').prependTo(document.body); 
    });​ 
}); 

Demonstration이

(최고의 효과를 위해 매우 느린 페이지에 대한 링크 변경) 그러나 페이지에 따라 달라집니다 : https://www.google.com/search?sugexp=chrome,mod=10&sourceid=chrome&ie=UTF-8&q=modal+box

Answer 2

이 작업을 수행 할 수있는 페이지가 즉시 일부 콘텐츠를 전송하는 경우 전체 내용이 아니라면 div를 볼 시간이 없습니다.

Answer 3

아약스가 더 우아 할지라도 가능합니다. 기본 이벤트를 방지하여 탐색을 차단 한 다음 UI 업데이트를 강제 실행 한 다음 위치 URL을 대상 URL로 변경해야합니다. 이런 식으로 뭔가 : 아마도

$('#mylink').click(function(e) { 
    e.preventDefault(); 
    var url = this.href; 
    // Update the UI here 
    setTimeout(function() { 
     // This is a trick to force a repaint 
     window.location.href = url; 
    },0); 
}); 

Answer 4

, 당신은로드 대화 상자가 즉시 사라하고 새로운 페이지가 렌더링 될 때 새 페이지로 대체 표시 할 수 있습니다?

세 가지 아이디어가 떠오 릅니다.

---

당신은 소스 페이지의 제어가 아닌 대상이있는 경우 -이 같은 뭔가 태그 '정상적인 동작을 대체하는 클릭 이벤트 처리기를 사용

1. 표시 로딩 애니메이션을
2. 태그의 href 속성으로 정의 된 URL로 AJAX 요청을 시작합니다 (URL로 소스를 숨김으로 생성).
3. 요청이 완료되면 문서의 내용을 응답으로 바꿉니다.

원래 페이지에서 정의한 자바 스크립트와 CSS를 잃지 않으므로 실제로는 털이 나올 수 있습니다. 또한 사용자의 브라우저에 표시된 URL도 변경되지 않습니다. 당신은 AJAX를 통해 백그라운드에서 페이지를로드 한 후 리디렉션 수 : 대상의 제어를하고 (심지어 몇 초 동안) 대상 캐시를 만들 수 있다면

---

. 첫 번째로드가 느린 경우 리디렉션은 캐시에서 페이지를로드합니다.

---

그리고 또 다른 대안

: 대상 페이지의 컨트롤이있는 경우, 당신은 매개 변수가있는 경우, 서버는 로딩 애니메이션으로 구성된 페이지와 약간의를 반환하도록 선택적 매개 변수를 정의 할 수 있습니다 실제 페이지를로드하는 javascript. 아약스를하면서