페이지에서 버튼이나 링크 클릭 시 로드될 때 로딩이미지 띄우기
본문
페이지에서 버튼이나 링크 클릭 시 로드될 때 로딩이미지 띄우려고 합니다.
근데 지금 코드를 작성한 상태입니다.
<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;
}
#load > img {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
}
</style>
<script>
$(window).load(function() {
$('#load').hide();
});
</script>
<div id="load">
<img src="/assets/img/../layout/loading.gif" alt="loading">
</div>
근데 생각했던건 버튼을 눌렀을 때, 누른 페이지에서 로딩이 되고있어서 해당 페이지가 로딩중일 때 띄우려고 하는데,
현재는 버튼을 누르고 로딩 후, 페이지가 넘어간 후에 넘어간 페이지에서 잠깐나왔다가 사라지고있습니다 ㅠㅠ
해당페이지에서 링크를 눌렀을 때 바로 나오게 할 수는 없을까요?
참고 : 모든페이지에 한번에 적용하는 파일을 알수가 없어서 공통으로 들어가는 헤더에 넣었습니다.
답변 1
$('a')click(function (e) {
e.preventDefault();
var link = $(this).attr("href");
if (link != "#") {
$('#load').show();
setTimeout(function() {
$('#load').hide();
location.href = link;
}, 1000);
}
});
똑같이 헤더파일에 넣으면 적용이 될까요?
답변을 작성하시기 전에 로그인 해주세요.