jQuery iframe 호출 로딩이미지 처리

jQuery iframe 호출 로딩이미지 처리

iframe 에 시간이 오래 걸리는 페이지 호출시 또는 ajax 로 데이터 처리시 사용하면 유용하다.

<script>

var iHTML = '<div style="width:100%;height:100%;display:table;position:absolute;left:0;top:0;">';

iHTML += '<div style="width:100%;height:100%;display:table-cell;text-align:center;vertical-align:middle;background-color:rgba(0,0,0,0.0);">';

iHTML += '<img src="https://t1.daumcdn.net/cfile/tistory/26794936577F4F9E14" alt="Loading..." title="Loading..." />';

iHTML += '</div>';

iHTML += '</div>';

var loadingObj = $(iHTML).appendTo(document.body);

var tFrame = document.getElementsByName('frame_test');

$(tFrame).load(function(){

loadingObj.hide();

});

tFrame.src = './test.html';

</script>

<iframe name="frame_test" id="frame_test" src=""></iframe>

<script>

var iHTML = '<div style="width:100%;height:100%;display:table;position:absolute;left:0;top:0;">';

iHTML += '<div style="width:100%;height:100%;display:table-cell;text-align:center;vertical-align:middle;background-color:rgba(0,0,0,0.1);">';

iHTML += '<img src="https://t1.daumcdn.net/cfile/tistory/26794936577F4F9E14" alt="처리중입니다." title="처리중입니다." />';

iHTML += '</div>';

iHTML += '</div>';

var loadingObj = $(iHTML).appendTo(document.body);

var request = $.ajax({

type:'POST',

data: {param1:'param1',param2:'param2'},

url:'./test.php',

async: true,

success:function(result){

loadingObj.hide();

}

});

</script>

응용하기 나름인 것 같다.