나는 현재의 상황을했습니다 비 아약스 페이지

Question

와로드 대화 상자를 표시합니다

1. 일부 HTML 페이지에 링크가 있습니다. 사용자가 해당 링크를 클릭하면

2. , NORMAL (아약스 대) HTTP 요청을 웹 서버 (일반적으로 자바 서블릿) 그 후

3. 에 전송되고, 물론 브라우저에서 내용을 가져올 것이다 서버에서 렌더링을 시작합니다. 나는 필요 (페이지가로드되는 동안) 3 단계 전에

가 수행되고 - (이 요구 사항 인 원인, 아약스에 그것을달라고하지 실제로는 수정 된 내용으로 동일한 페이지입니다) 사용자에게 뭔가를 말하는 어떤 프레임을 표시하려면 loading ....

Answer 1

글쎄, 링크를 클릭하면 페이지의 "Loading ..."로 div를 채우면됩니다. 여기에 일부 거친 코드

$('#yourlink').click(function(){ 
    $('#loading').html('Loading....'); 
}); 


<div id="loading"> 
</div> 

그리고 페이지가로드가 현재 로딩 DIV 빈으로 교체 될 때,이 로딩이 완료되었음을 의미합니다입니다.

또 다른 방법 :

CSS를

#loading 
{ 
    display: none; 
} 

HTML

<div id="loading"> 
    Loading.... 
</div> 

JS

$('#yourlink').click(function(){ 
    $('#loading').show(); 
}); 

Answer 2

음,이 작업을 수행하는 여러 가지 비 아약스 방법이있다. 내가 생각하는 가장 간단한 당신이 당신의 초기 페이지에 숨겨진 DIV 유지하여 로딩 바,와 GIV 애니메이션 이미지를 가지고하는 것입니다 :

<div style="display:hidden;"><img src="/img/loading.gif"></div> 

은 다음 페이지를 제출 링크/버튼에 약간의 자바 스크립트를 추가, 클릭하면 이미지가있는 div가 숨김 해제됩니다.

Answer 3

이렇게하는 방법에는 여러 가지가 있습니다. 나는 이것을 다음과 같이 처리한다 :

// Any anchor with showOverlay class will invoke the overlay function 
$("a.showOverlay").click(function() { 
    overlay(); 
}); 

// Normal form submits are intercepted. Overlay call also be skipped by 
// making the form of class "noOverlay" 
$("form").submit(function() { 
    var skipOverlay = $(this).hasClass("noOverlay"); 
    if(!skipOverlay){ 
     overlay(); 
    }  
    return valid; 
}); 

// This overlay function uses the blockUI plugin, other methods can also be used 
function overlay(){ 
    $.blockUI({ 
     fadeIn: 500, 
     css: { 
      height: '150px', 
      top: '35%' 
     }, 
     message: '<div style="margin-top: 40px;"><table align="center" ><tr ><td style="padding-right: 25px;"><img src="/images/wait.gif" /></td><td style="line-height: 25px;"><h1> Just a moment...</h1></td></tr></table></div>' 
    }); 
}