2013-05-30 3 views
0

최근에 저는 새로운 웹 사이트 레이아웃 작업에 대해 생각해 봤지만 요즘 많은 영감을 얻었습니다. 그것을 내 프로젝트에 구현하십시오. 이러한 문제 중 하나는 Squarespace가 자신의 웹 사이트에 로고가 미리로드 된 이미지를 표시 한 다음 웹 페이지로 빠르게 전환하는 것과 마찬가지로 웹 페이지로드를 허용하기 전에 이미지를 미리로드하는 것입니다. 나는 그들의 소스 코드를 보려고했지만, 어떻게했는지 또는 사용했던 것을 발견하지 못했다. (Jquery?/Javascript?). 나는 아이디어가 없다. 나는 약간의 연구를했지만, 대부분은 내가 원하지 않는 "진행률 표시 줄"로 구성되어 있습니다. 나는 Squarespace를 이미지와 멋진 배경으로 에뮬레이션하고 싶습니다. 그런 다음 내 웹 페이지로 전환합니다. 아무도 기꺼이 그렇게하는 법을 시연하지 않겠습니까? 모두에게 미리 감사드립니다.Squarespace와 같은 웹 페이지에서 프리 로더를 만들 수있는 방법은 무엇입니까?

피씨 나는 여전히 자바 스크립트와 Jquery를 배우고 있지만 사람들이 이러한 구현을 어떻게 내놓았는지에 매료되었다.

여기에 더 쉬운 웹 사이트 링크가 있습니다. http://www.squarespace.com/ 처음에는 전체 웹 사이트가로드되기 전에 로고가로드되는 것을 볼 수 있습니다. 그게 내 질문의 중심입니다.

+0

그냥 진행 표시 줄의 예를 살펴 대신 진행률 표시 줄의 로고를 표시합니다. 우리 스스로를 도와줌으로써 당신을 도울 수있게 도와주세요! – Mathletics

+0

아니, 나를 돕는 법을 보여줌으로써 나를 돕는다 (그냥 농담하는 것). 나는 어떤 진도 표시 줄도 보지 않았다, 나는 단지 내가 원하지 않는 (진행률 표시 줄) 예를 보여주고 있었지만, 나는 당신이 의미하는 것을 본다. 나는 그것을 시도 할 것이다. 그러나 한편으로, 누군가 희망을 갖고 나에게 그들이 어떻게 이것에 접근 할 것인지에 대한 좋은 예를 준다. 제안 해 주셔서 감사합니다. 고맙습니다. – Guled

답변

0

이 제품을 사용해 보시겠습니까?

튜토리얼 사이트 http://jquerybyexample.blogspot.com/2012/06/show-loading-image-while-page-is.html

HTML

<div id="dvLoading"></div> 

CSS

#dvLoading{ 
    background:#000 url(images/loader.gif) no-repeat center center; 
    height: 100px; 
    width: 100px; 
    position: fixed; 
    z-index: 1000; 
    left: 50%; 
    top: 50%; 
    margin: -25px 0 0 -25px; 
} 

JS

<script> 
    $(window).load(function(){ 
     $('#dvLoading').fadeOut(2000); 
    }); 
</script> 
+0

고마워요. – Guled

+0

당신은 천만에요. – yeyene