jQuery가 작동 중/대기 중 /로드 중임을 표시하는 방법은 무엇입니까?

Question

사용자에게 로딩 사진 및/또는 메시지를 표시하려면 어떻게해야합니까? 가능한 경우 회색으로 흐리게 처리 된 배경을 전체 화면으로 만드는 방법을 알고 싶습니다. 어떤 갤러리에서 큰 그림을 볼 때 (미안하지만, 예제 링크가 없음) 좋아.

현재 이미지 및 기타 포매 팅을하는 CSS 클래스를 추가하지만 어떤 이유로 작동하지 않습니다. 검색 결과가 div에 삽입됩니다.

HTML

<div id="searchresults"></div> 

CSS

div.loading { 
    background-image: url('../img/loading.gif'); 
    background-position: center; 
    width: 80px; 
    height: 80px; 
} 

JS

$(document).ready(function(){ 
    $('#searchform').submit(function(){ 
    $('#searchresults').addClass('loading'); 
    $.post('search.php', $('#'+this.id).serialize(),function(result){ 
     $('#searchresults').html(result); 
    }); 
    $('#searchresults').removeClass('loading'); 
    return false; 
    }); 
}); 

Answer 1

귀하의 문제는 당신이 아약스 호출을 발행 한 후 즉시 당신이 완료되지 후, removeClass('loading')를 호출하는 것입니다.

ajax 콜백에서 removeClass('loading')을 할 수 있습니다. $.post는 success 콜백 제공 할 수 있습니다 :

jQuery.post(url, [ data ], [ success(data, textStatus, XMLHttpRequest) ], [ dataType ]) 

및로드 사진은 어떤 경우에 제거해야 - succes에 실패를, 그래서 $.ajax()의 complete 콜백 사용하는 것이 좋습니다 :

$('#searchform').submit(function(){ 
    $('#searchresults').addClass('loading'); 

    $.ajax({ 
    type: 'POST', 
    url: 'search.php', 
    data: $('#'+this.id).serialize(), 
    success: function(result){ 
     $('#searchresults').html(result); 
    }, 
    complete: function() { 
     $('#searchresults').removeClass('loading'); 
    } 
    }); 
    return false; 
}); 

에 대한 추가 참조 $.ajax() docs

Answer 2

에서 "콜백 기능"섹션에서 콜백이 시도 :

$("#contentLoading").ajaxSend(function(r, s) { 
     $(this).show(); 
     $("#ready").hide(); 
    }); 

    $("#contentLoading").ajaxStop(function(r, s) { 
     $(this).hide(); 
     $("#ready").show(); 
    }); 

이것은 내 진도가 #contentLoading이고, 이는 ajax를 시작하고 아약스가 멈 추면 숨길 때 gif입니다.