$ .Ajax는 jquery를 사용하여 진행률 표시 줄과 함께 보냅니다.

안녕하십니까.
저는 $ .ajax 기능을 사용하여 서버에 데이터를 보내고이 방법으로 대부분의 다시 게시 페이지를 제거했지만 진행률 표시 줄이 필요합니다. 일부 진행 상황은 이제 결과를 보여주는 몇 초 후에 아무것도 보이지 않지만 메시지 나 작은 그림이 내 웹 사이트에 필요하다고 생각합니다. 어떻게 간단한 jquery 코드로 구현할 수 있습니까? 뭔가 팝업 및 페이지 진행 상황을 보여줍니다.

또한 진행 중에 다른 클릭을 방지하기 위해 다른 jquery를 추가해야합니다.

출처

2010-12-23 kamiar3001

당신은의 중심에 이미지와 함께 아무것도에서 사용자를 차단하기 위해 할 수있는 페이지 차단 사업부를

$("elemnt").click(function(){ 
    $("loader-img").show(); 

    $.ajax({ 
     url : "your url", 
     complete: function(){ 
      $("loader-img").hide(); 
     } 
    });  
});

로더 이미지처럼 뭔가를 할 수 뷰포트.

이 이벤트는 성공적인/실패한 Ajax 요청의 경우에 호출되므로 완전한 이벤트가 사용됩니다. 그런 다음 차단기를 표시하는 showBlocker() 메소드를 호출

function showBlocker(){ 
    $(".blocker .img").css({ 
     top: $(window).height()/2, 
     left: $(window).width()/2 
    }); 
    $(".blocker").show().css({ 
     height: $(document).height() 
    }); 
}

스크립트

에서 다음

<style type="text/css"> 
    .blocker{ 
     z-index: 99999; 
     opacity: .5; 
     height: 100px; 
     position: fixed; 
     background: none repeat scroll 0 0 lightgrey; 
     width: 100%; 
    } 

    .blocker .img{ 
     position: fixed; 
     color: red; 
    } 
</style> 

<body> 
    <div class="blocker" style="display: none"> 
     <div class="img">img</div> 
    </div> 
    ............. 
    ............. 
    .............

처럼 뭔가를 할 수

편집.

필요에 맞게 답변을 조정할 수 있습니다. 이것은 달성 할 수있는 샘플 일뿐입니다.

출처

2010-12-23 06:48:10

블로킹 div는 절대 위치가 페이지의 중앙에 있어야하므로 클릭을 방지 할 수 있습니까? – kamiar3001

감사합니다. 너무 완전하고 좋은 anwser입니다. – kamiar3001

AJAX 호출이 시작되기 전에 로딩 이미지를 표시 한 다음 콜백 함수에서이 이미지를 숨길 수 있습니다.

뭔가

같은

// handler for ajax trigger 
$("#yourelement").click(function(){ 
    // your loading image object 
    $("#yourimage").show(); 
    $.ajax({ 
     url: 'ajax/test.html', 
     success: function(data) { 
     $("#yourimage").hide(); 
     } 
    }); 
});

출처

2010-12-23 06:37:07 rahul

$ .Ajax는 jquery를 사용하여 진행률 표시 줄과 함께 보냅니다.

답변

관련 문제