iframe에서 웹 사이트를로드하는 동안 GIF로드를 표시하는 방법은 무엇입니까?

Question

내 도메인에 src =가있는 iframe이 들어있는 inc/content.php 파일이 있습니다.

<script type="text/javascript"> 
function viewNext() 
{ 
    $('#content').load('inc/content.php'); 
} 
</script> 

기능 하중은 iframe에서 inc/content.php 파일 페이지 index.php에 <div id="content"></div>

가 어떻게 loading.gif 이미지 동안 inc/content.php 파일을 표시 할 수 있습니다 : 내 index.php 페이지에서

나는 자바 스크립트 함수 다음 호출을 클릭 할 때 어떤 버튼 <button id="nextButton" onClick="viewNext();return false;">New</button>이 인덱스 파일에로드됩니까?

Answer 1

당신은 페이지를로드하기 전에로드 이미지를 표시하고 완료되면 숨길 (요청이 완료 될 때 호출되는 콜백 추가하기위한 두 번째 매개 변수를 사용) 할 수 있습니다, 당신이 필요로 분명히

$("#loading").show(); 
$("#content").load("inc/content.php", function() { 
    $("#loading").hide(); 
}); 

을 같은 ID loading와 문서의 요소 :

<img id="loading" src="loading.gif" alt="Loading"> 

Answer 2

<script type="text/javascript"> 
function viewNext() 
{ 
    show_loading() 
    $('#content').load('inc/content.php' , hide_loading); 
} 

function show_loading(){ $('.loading').show() } 
function hide_loading(){ $('.loading').hide() } 
</script> 

"로딩"loading.gif 들어있는 DIV의 클래스가된다. loading.gif 이미지에 대한

---

, 당신은 DIV에 넣어해야 할 수있는이 같은 페이지의 중앙에 "부동"

HTMLCODE :

<div style="position:absolute; top:100px; left:50%;" class="loading"> 
    <img src="/img/loading.gif" /> 
</div> 

당신이 할 수있는 인라인 스타일 "top : ...; left : ....;"을 변경하여 로딩 이미지의 표시 위치를 변경하십시오. 페이지의 위치가 아닌 화면의 로딩 기준을 지정하려면 position:fixed;으로 바꾸십시오 (IE에서는 작동하지 않지만).

Answer 3

멋지게 보이려면 여기를 사용하십시오. 화면에 모달을 넣고 중간에 로딩 GIF를 넣는 작업에서.

<script type="text/javascript"> 
function viewNext() 
{ 
    $('#loading').attr('src', 'some_path/loading.gif'); 
    $('#container').block({ message: $('#loading') }); 
    $('#content').load('inc/content.php' , function(){ $('#container').unblock(); }); 
} 
</script> 

jquery.blockUI.js를 사용하여 특정 컨테이너를 차단하거나 div 또는 전체 화면을 차단할 수 있습니다.

당신이 필요로하는 HTML은 당신은 콜백에게로드 기능을 첨부 할 수

<img id="loading" style="display: none;" src="" />