아작스(AJAX) 로딩이미지 질문이있습니다.
본문
게시글 업로드시 아작스 로딩이미지를 구현하구싶은데요... 아래 출처누루시면 8년전 자료라...
아직 그 자료가남아있나해서요. 찾아봐두안보이드라구요.예제나 자료같은게 있을가요?
-----------------------------------------------------------------------
글 출처 : http://sir.co.kr/bbs/board.php?bo_table=g4_tiptech&wr_id=3108&page=1&sca=&sfl=&stx=&spt=0&page=1&cwin=#c_33979
알지보드에 공개되어있는 매드버드님의 로딩중 보여주기팁을 그누보드에 적용하는방법을 소개해드립니다.
먼저 팁을 공개하여주신 알지보드의 매드버드님께 감사드립니다...^^
팁은 여기
http://rgboard.com/rgboard/view.php?&ss[fc]=5&bbs_id=tip&page=&doc_num=211
파일은 여기
http://rgboard.com/rgboard/view.php?&ss[fc]=5&bbs_id=skin&page=&doc_num=284
에 있는 소스를 그누보드에 사용할수있도록 적용하는 방법입니다...
==================================================
우선 다운 받은 loding.swf 파일을 사용하시는 스킨의 img class="view_image" 폴더에 넣어주시고,
사용하시는 스킨의 write.skin.php 파일의
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
?>
이부분 바로 아래에
<script>
function upload()
{
document.all.selection.style.visibility = "hidden";
document.all.upload.style.visibility = "visible";
}
</script>
<div id="upload" style="top:180;left:380; position:absolute; visibility:hidden;" align="center" valigh="middle">
<table border="1" cellpadding="0" cellspacing="0" align="center" bordercolordark="white" bordercolorlight="black">
<tr>
<td width="200" height="60"><embed src="<?=$board_skin_path?>/img class="view_image"/loading.swf" width="200" height="60"></td>
</tr>
</table>
</div>
이렇게 넣어줍니다.
<form name="fwrite" method="post" action="javascript:fwrite_check(document.fwrite);" enctype="multipart/form-data" style="margin:0px;">
이부분을 찾아서
<form name="fwrite" method="post" action="javascript:fwrite_check(document.fwrite);" enctype="multipart/form-data" style="margin:0px;" onsubmit="return upload()">
이렇게 바꿔줍니다.
objCell.innerHTML = "<input type='file' class=ed size=32 name='bf_file[]' title='파일 용량 <?=$upload_max_filesize?> 이하만 업로드 가능'>";
이 부분을 찾아서
objCell.innerHTML = "<div id='selection' align='center' valigh='middle'><input type='file' class=ed size=32 name='bf_file[]' title='파일 용량 <?=$upload_max_filesize?> 이하만 업로드 가능'></div>";
이렇게 바꿔 줍니다...끝
이후 해당스킨을 사용하는 게시판에 파일을 업로드해보세요..
로딩중이라는 메시지가 보여질것입니다....^^
답변 2
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
function Loading(){
$.ajax({
beforeSend: function()
{ $('#loading').show(); },
complete: function()
{ $('#loading').hide(); },
url: 'http://example.com',
success: function(data)
{
//do something with data
}
});
}
</script>
Jquery Library 넣으시고 이런 식으로 처리 하면 됩니다. Jquery 에 대한 지식은 있으셔야 합니다.
c
감사합니다 ^^
http://api.jquery.com/jQuery.ajax/
$.ajax({
url: "http://fiddle.jshell.net/favicon.png",
beforeSend: function() {
$("#content").html("<img src='./img/loading.gif'>");
//beforeSend를 구현 하시면 됩니다.
}
})
.done(function( data ) {
if ( console && console.log ) {
console.log( "Sample of data:", data.slice( 0, 100 ) );
}
});거북이코딩님 답변 정말 감사합니다.
제가 입문자라 그러는데... 저코드를 어느부분에 넣어야 작동이될런지요.
좋은자료와답변 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
