페이지를로드하는 동안 ajax 로딩 GIF 애니메이션을 표시하는 방법은 무엇입니까?

Question

내 웹 사이트에 AJAX를 구현하려고합니다. div changepass의 내용을 클릭하면 changepass.template.php가로드됩니다. 다음은이를 위해 사용되는 코드입니다.

$(function() { 
    $(".changepass").click(function() { 
    $(".block1").load("views/changepass.template.php"); 
    return false; 
}); 

제 질문은 changepass.template.php 페이지가 완전히로드 된 동안 GIF 애니메이션 (loading.gif)을 표시하는 방법입니다. 코드 팁 좀주세요.

Answer 1

이렇게하는 데는 여러 가지 방법이 있습니다. 간단한 방법 일 :

<div style="display:none" id="dvloader"><img src="loading.gif" /></div> 

JS :

$(function() { 
    $(".changepass").click(function() { 
     $("#dvloader").show(); 
     $(".block1").load("views/changepass.template.php", function(){ $("#dvloader").hide(); }); 
     return false; 
    }); 
}); 

편집 디스플레이 : 블록 쇼()제임스 와이즈맨 :)

Answer 2

오히려에서 제안 후 그 스타일 설정

.css("display", "block"); 

및 .hide()을 사용하면됩니다. show() 방법.

이들은 HTMl 요소에 대한 브라우저 기본 스타일 시트 정의를 설명합니다. 이미지에 '블록'을 표시하지 않을 수도 있습니다. 요소에 대해 서로 다른 가능한 표시 스타일의 부하가있을 수 있습니다 :

$(function() { 
    $(".changepass").click(function() { 
    $("#gifImage").show(); 
    $(".block1").load("views/changepass.template.php",null,function(){ 
      $("#gifImage").hide(); 
    }); 
    return false; 
}); 

Answer 3

당신이 부하를 호출 한 후로드 지프를 표시하고 부하 기능에 콜백을 사용하여 숨기기 위해 몇 가지 방법을 호출 할 수 있습니다 조금 더 강력한, 예를 들어, 당신은 HTML에

<div style="display:none" id="dvloader"><img src="loading.gif" /></div> 

을 추가하는 것을 잊지하려면, 당신은 또한 jQuery를이 작업을 수행 할 수 있습니다, 뭔가 like :

var container = $.create('div', {'id':'dvloader'}); 
var image = $.create('img', {'src':'loading.gif'}); 
container.append($(image)); 
$("body").append($(container)); 

div를 자동으로 추가합니다.

그냥 onclick 버튼 이벤트에서 실행하십시오.

오류가 발생하지 않도록 만듭니다.

Answer 4

:

http://www.w3schools.com/htmldom/prop_style_display.asp