페이지 변경시 로딩 채택완료
안녕하세요
참고하여. 페이지 변경시 로딩을 표시해주려고합니다.
설정대로 진행 했는데.
지정해놓은 이미지 로딩화면이 계속 떠있는데
지정한 시간 2초 만보여주고싶은데 어떻게 처리해야할까요 ?
</strong></p>
<p><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></p>
<p><strong>
답변 2개
$(window).load(function() {
$('#loading').hide();
});
계속 떠있다는건 hide 액션이 안먹히는거 같습니다
$(window).load(function() {
alert('로딩완료');
$('#loading').hide();
});
로 해서 alert 가 뜨는지 확인해보시고
안뜨시면
개발자 도구를 키셔서 실행시간이 오래걸리는 이유를 찾으셔야 합니다
load 됐을때가 아닌 무조건 2초후 에 닫고 싶으시면
</font></p>
<p><font face="monospace"><script></font></p>
<p><font face="monospace">function hidelayer(){</font></p>
<p> </p>
<pre>
<code>$('#loading').hide(); </code></pre>
<p><font face="monospace">}</font></p>
<p><code><em>setTimeout(hidelayer, 2000);</em></code></p>
<p><font face="monospace"></script></font></p>
<p><font face="monospace">
위 코드로 해보세요
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
[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]