페이지 변경시 로딩
본문
안녕하세요
참고하여. 페이지 변경시 로딩을 표시해주려고합니다.
설정대로 진행 했는데.
지정해놓은 이미지 로딩화면이 계속 떠있는데
지정한 시간 2초 만보여주고싶은데 어떻게 처리해야할까요 ?
<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
$(window).load(function() {
$('#loading').hide();
});
계속 떠있다는건 hide 액션이 안먹히는거 같습니다
$(window).load(function() {
alert('로딩완료');
$('#loading').hide();
});
로 해서 alert 가 뜨는지 확인해보시고
안뜨시면
개발자 도구를 키셔서 실행시간이 오래걸리는 이유를 찾으셔야 합니다
load 됐을때가 아닌 무조건 2초후 에 닫고 싶으시면
<script>
function hidelayer(){
$('#loading').hide();
}
setTimeout(hidelayer, 2000);
</script>
위 코드로 해보세요
"<-- 이부분과"
"<-- 이부분을 50% 로 하면 화면 정 가운데에 로딩 이미지가 나타난다"
삭제
삭제하였지만 동일합니다..
<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>
답변을 작성하시기 전에 로그인 해주세요.
