페이지에서 버튼이나 링크 클릭 시 로드될 때 로딩이미지 띄우기 채택완료
qoqofh
4년 전
조회 1,851
페이지에서 버튼이나 링크 클릭 시 로드될 때 로딩이미지 띄우려고 합니다.
근데 지금 코드를 작성한 상태입니다.
</p>
<p><style>
#load {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.8;
background: #333;
z-index: 99;
text-align: center;
}</p>
<p>#load > img {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
}
</style></p>
<p><script>
$(window).load(function() {
$('#load').hide();
});
</script>
<div id="load">
<img src="/assets/img/../layout/loading.gif" alt="loading">
</div></p>
<p>
근데 생각했던건 버튼을 눌렀을 때, 누른 페이지에서 로딩이 되고있어서 해당 페이지가 로딩중일 때 띄우려고 하는데,
현재는 버튼을 누르고 로딩 후, 페이지가 넘어간 후에 넘어간 페이지에서 잠깐나왔다가 사라지고있습니다 ㅠㅠ
해당페이지에서 링크를 눌렀을 때 바로 나오게 할 수는 없을까요?
참고 : 모든페이지에 한번에 적용하는 파일을 알수가 없어서 공통으로 들어가는 헤더에 넣었습니다.
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
4년 전
</p>
<p>$('a')click(function (e) {</p>
<p> e.preventDefault();</p>
<p> var link = $(this).attr("href");</p>
<p> if (link != "#") {</p>
<p> <code> $('#load').show();</code></p>
<p> <strong>setTimeout(</strong>function() {</p>
<p> <code>$('#load').hide();</code></p>
<pre>
<code> location.href = </code>link<code>;
</code><span style="font-family: "Malgun Gothic", "맑은 고딕"; font-size: 0.875em;"> }, 1000);</span></pre>
<p> }</p>
<p>});</p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
q
qoqofh
4년 전
똑같이 헤더파일에 넣으면 적용이 될까요?
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인