대화 상자를 만들려고 할 때 로더 이미지를 표시하는 방법

Question

대화 상자의 테이블에서 다른 동적 데이터를 다른 테이블의 다른 셀에 표시 할 때 일부 동적 데이터가 표시됩니다 팝업 (대화 상자). 이 두 번째 팝업 테이블은 첫 번째 테이블의 셀을 클릭 한 다음 시간이 좀 걸립니다. 내 두 번째 테이블 (대화 상자) 때까지 로더 이미지를 표시하고 싶습니다 .... 그물에 많은 검색했지만 내 상황을 만났습니다 ...

이 함수는 첫 번째 셀을 클릭 할 때 호출됩니다. 테이블 ...

// CODE SNIPPET 
function access(test1,facilityName,status) 
{ 
    var divString="<table>"+"<tr>"+"<td><table><div id='rfidMove'></div></table></td>"+"</tr></table>"; 

    //sending some parameters on a jsp page and based on these params getting content of that jsp here 

    $.post("RfidInventory.jsp?","container="+test1+"facilityName="+facilityName+"&                             status="+status, function(data){ 

    // showing another jsp page data here to make table in this dialog  
     $("#rfi").dialog("destroy"); 
     $("#rfi").html(divString); 
     $("#rfi").dialog({ 
     width: '650', 
     height: '300', 
      zIndex : '3000', 
      modal:true, 
     title: "RFID INVENTORY DETAIL", 
      overlay: { opacity: 0.1, background: 'black'} 
     }); 
    $("#rfidMove").html(data); 
}); 

제발 도와주세요 난 이미 시간을 많이 소비하지만 여전히 애니메이션 사용,

Answer 1

이 DOM 어딘가에 로더 태그 추가 ... 솔루션을 사냥 GIF, 숨기기 :

,210

<div id="#loader" style="display: none;"><img src='loader.gif' alt='loading' /></div> 

그런 다음 바로 AJAX 호출하기 전에 표시 :

$("#loader").css("display", ""); 
$.post(url, function(data) { 
    $("#loader").css("display", "none"); 
}); 

이 할 수있는 일반적인 방법이다. 이 사이트에서 멋진 사용자 화 된 애니메이션 GIF를 다운로드 할 수 있습니다. http://ajaxload.info/

Firebug에서이 항목을 사용해보십시오.

추가 로더

$("body").append("<img id='myloader' src='http://www.ajaxprojects.com/db/img16.gif' />"); 

숨기기는

$("#myloader").css('display', 'none'); 

Answer 2

var val = 10; 
$("#progressbar").progressbar({ 
    value: val 
}); 

<div id="progressbar"></div> 

참조하십시오이 링크 : -

http://jqueryui.com/demos/progressbar/

,

http://docs.jquery.com/UI/Progressbar

.post 전에

http://www.codeproject.com/Articles/66049/Showing-Progress-Bar-Using-jQuery