홈페이지 속도가 느릴때 메인에 로딩 중 아이콘을 적용한다

홈페이지 속도가 느릴때 메인에 로딩 중 아이콘을 적용한다

홈페이지 속도가 느릴때 메인에 로딩 중 아이콘을 적용한다

강종헌 0 57

홈페이지 <head>와 <head> 파일에 아래의 코드를 삽입하면 된다.

 

<?php if($is_index) { //인덱스에서만 실행 ?>
  <style>
   .at-loader { background: #fff; left: 0; top: 0; width: 100%; height: 100%; display: block; position: fixed; z-index: 100000; }
   .at-loader .loader { color:#ddd; margin: -25px 0 0 -25px; left: 50%; top: 50%; width: 50px; height: 50px; line-height:50px; font-size: 45px; position: absolute; z-index: 10001; }
  </style>
  <script>// Page loader
   $(window).on('load', function () {
    $(".at-loader .loader").delay(0).fadeOut();
    $(".at-loader").delay(100).fadeOut("slow");
   });
  </script>
  <div class="at-loader">
   <div class="loader"><i class="fa fa-cog fa-spin"></i></div>
  </div>
 <?php } ?>

로딩 중 이미지를 적용하려면 <div class="loader"><i class="fa fa-cog fa-spin"></i></div>​의 <div class="loader">와 </div> 사이에 이미지 주소를 삽입하면 된다. 

0 Comments
Category
K창업연구소 강종헌 소장

월-금 : 9:30 ~ 18:30
토.일.공휴일 휴무
bizidea@hanmail.net
상가분양,임대,매매문의 사절합니다.
리스크를 최소화하는 사업정리법, 폐업도 전략이다

소상공인방송
희망리턴패키지
State
  • 현재 접속자 19 명
  • 오늘 방문자 121 명
  • 어제 방문자 604 명
Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand