2016-06-21 5 views
1

Page Preloading Effect을 사용하여 내 홈페이지를로드 할 수 있습니다. 사이트에 방문 할 때 한 번만 실행되도록하는 방법을 연습해야합니다. 홈 페이지를 방문 할 때마다 현재 프리 로딩 효과가 실행됩니다. 아마 나는 쿠키를 사용할 수 있지만 어디에서 시작 해야할지 확실하지 않습니다! 감사합니다 :)페이지 미리 불러 오기 - 한 번로드 및 실행

+0

, 당신은 완전히 애니메이션 전까지 페이지가로드, 프리 로더를 찾고 계십니까? –

+0

사용자가 사이트를 방문 할 때 표시해야하는 큰 이미지가 있기 때문에 가능합니다. 가능한 한 이미지의 크기를 최적화하고 줄 였지만 그 크기는 여전히 매우 커서 사용하기 쉽도록 애니메이션이로드되는 동안 재로드 애니메이션을 생각했습니다. – user3711619

+0

내 솔루션을 사용해보고 어딘가에 갇혀 있는지 물어보십시오. –

답변

0

그럼이 작업을 수행하는 데 jQuery를 사용할 수 있습니다. HTML 페이지에서 body 태그 안에 다음 코드를 추가하십시오. 이제 아래

 <div class="loader"> 
     <h5 class="loaderH">Preparing. ...</h5> 
     </div> 

위의 HTML 태그

 .loader { 
      position: fixed; 
      left: 0px; 
      top: 0px; 
      width: 100%; 
      height: 100%; 
      z-index: 9999; 
      background: url('../../images/loaders/preloader.gif') 50% 50% no-repeat rgb(249,249,249); 
     } 

     .loaderH{ 
      position: fixed; 
      left: 45vw; 
      top: 55vh; 
     } 

그리고 마지막으로 사용자 JQuery와 페이지가 준비되기 전에로드에 대한 CSS입니다. RGB를 반복 아니 - URL ('../../ 이미지/로더/preloader.gif') 50 % 50 % (249,249,249)을 :

 $(window).load(function() { 
      $(".loader").fadeOut("slow"); 
      console.log('loaded'); 
     }) 

은 배경 URL의 SRC에게 배경을 변경하는 것을 잊지 마세요 ;

프리 로더의 경우 다음을 사용할 수 있습니다.

http://www.ajaxload.info/images/exemples/26.gif http://www.mandalayonlinestore.com/assets/img/loader.gif

하거나 구글에서 프리 로더 GIF