페이지 변경시 로딩 채택완료
안녕하세요
참고하여. 페이지 변경시 로딩을 표시해주려고합니다.
설정대로 진행 했는데.
지정해놓은 이미지 로딩화면이 계속 떠있는데
지정한 시간 2초 만보여주고싶은데 어떻게 처리해야할까요 ?
Copy
<style type="text/css">
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center; }
#loading-image {
position: absolute;
top: 100px; <-- 이부분과
left: 240px; <-- 이부분을 50% 로 하면 화면 정 가운데에 로딩 이미지가 나타난다
z-index: 100; }
</style>
<div id="loading"><img id="loading-image" src="/imgs/ajax-loader.gif" alt="Loading..." /></div>
<div>
<img src = "/imgs/sample/cutyDog.jpg">
</div>
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading').hide();
});
</script>답변 2개
채택된 답변
+20 포인트
넓은마인드
4년 전
$(window).load(function() {
$('#loading').hide();
});
계속 떠있다는건 hide 액션이 안먹히는거 같습니다
$(window).load(function() {
alert('로딩완료');
$('#loading').hide();
});
로 해서 alert 가 뜨는지 확인해보시고
안뜨시면
개발자 도구를 키셔서 실행시간이 오래걸리는 이유를 찾으셔야 합니다
load 됐을때가 아닌 무조건 2초후 에 닫고 싶으시면
Copy
<script>
function hidelayer(){
$('#loading').hide();
}
setTimeout(hidelayer, 2000);
</script>위 코드로 해보세요
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
마르스컴퍼니
4년 전
"<-- 이부분과"
"<-- 이부분을 50% 로 하면 화면 정 가운데에 로딩 이미지가 나타난다"
삭제
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
4년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
[code]
<style type="text/css">
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center; }
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100; }
</style>
<div id="loading"><img id="loading-image" src="/imgs/ajax-loader.gif" alt="Loading..." /></div>
<div>
<img src = "/imgs/sample/cutyDog.jpg">
</div>
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading').hide();
});
</script>
[/code]