SIR
목록으로

페이지에서 버튼이나 링크 클릭 시 로드될 때 로딩이미지 띄우기 채택완료

qoqofh
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전 조회 1,957
답변 1
목록

페이지에서 버튼이나 링크 클릭 시 로드될 때 로딩이미지 띄우려고 합니다.

 

근데 지금 코드를 작성한 상태입니다.

Copy 
<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개

채택된 답변
+20 포인트

Copy 
$('a')click(function (e) {

   e.preventDefault();

   var link = $(this).attr("href");

   if (link != "#") {

      $('#load').show();

      setTimeout(function() {

          $('#load').hide();


         location.href = link;
      }, 1000);

   }

});
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

똑같이 헤더파일에 넣으면 적용이 될까요?

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고