jquery를 사용하여로드하는 이미지를 추가하는 방법?

Question

양식/서버가 다시로드 될 때까지 로딩 또는 회 전자 메시지를 추가하고 싶습니다. 양식을 확인하고 폼이 회 전자를 사용 중지하도록로드를 마쳤다는 것을 어떻게 알 수 있습니까?

참고 : 양식을 제출하면 서버를 다시 시작할 때까지 양식 헤더 만 표시되고 다시 시작 및 변경 사항이 업데이트 될 때까지는 업데이트 된 데이터를 사용할 수 없습니다. 현재 양식을 다시 사용할 수있을 때까지 수동으로 페이지를 새로 고칩니다.

여기 내 HTML 및 jquery 스 니펫과 로딩 코드입니다. 로드 코드가 작동하지 않습니다. 로딩 메시지 로딩 이미지에 대한 간단한 솔루션을

$(document).ready(function() { 
       $('<div id="loading">Loading...</div>') 
       .insertBefore('#myform') 
       .ajaxStart(function() { 
        $(this).show(); 
       }).ajaxStop(function() { 
        $(this).hide(); 
       }); 
      }); 

Answer 1

에 대한

코드, 당신은 prettyLoader를 플러그인 jQuery를 사용할 수 있습니다.

DOM을 이렇게로드되면 당신은 만 플러그인을 초기화 할 필요가

:

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function(){ 
     $.prettyLoader(); 
    }); 
</script> 

을 그리고 그것은 아약스 요청이 자동으로 될 때마다 로딩 아이콘이 표시됩니다. 테이블을 업데이트

는

두 가지 방법으로 수행 할 수 있습니다 : 어느 쪽이든 당신은 아약스 요청에 HTML을로드하고 단순히 그것을 덮어 쓰기 :

$('#myTable').innerHtml = data; 

를하거나 테이블 데이터와 JSON 객체를 반환 할 수 있으며,이를 넣어 데이터를 테이블에 저장하십시오. 이를 위해서는 ViewModel을 사용하는 것이 좋습니다 (예 : Knockout.js).

Answer 2

당신은 당신의 스크립트에이를 추가 할 수 있습니다 : 당신이 원하는 경우

// to show the loading spinner 

$("#loading").ajaxStart(function(){ 
    $('#loader').show(); 
}); 

// to hide the loading spinner 

$("#loading").ajaxStop(function(){ 
    $('#loader').hide(); 
}); 

로더는 중앙에 로딩 GIF와 너비와 높이 (100 %와 절대 위치 div 요소와 DIV 것 또는 그 수 로드 중 텍스트 메시지 일뿐입니다 ...)