2012-03-14 2 views
4

헤드 스크립트의 다운로드가 끝날 때까지 jQuery Mobile 앱에 스플래시 화면을 표시하려면 어떻게해야합니까?jQuery 모든 장치에 대한 모바일 스플래시 화면

<link rel="apple-touch-startup-image" href="img/loading-splash.png"> 

내가 비슷한 싶습니다,하지만 그 모든 플랫폼에서 작동 :

내가 애플 기기에이 같은 것을 추가 할 수 있다는 것을 알고. 나는 못 생겼기 때문에 모든 헤드 스크립트가로드 될 때까지 본문을 표시하고 싶지 않습니다. 동일한 목표를 달성하기 위해 모든 스크립트를 머리에 넣는 대안이있을 수 있습니까?

답변

3

체크 아웃 다음 링크 중 하나를 https://gist.github.com/472519

  • http://mathiasbynens.be/notes/touch-icons
  • 모두 당신에게 말할 것이다 사과 업 이미지 시작 (전용 iOS 기기에서 작동을하고 너무 쉽게 보여줄 수는 없습니다.)

    플랫폼간에 스플래시 화면을 사용할 수있게되기까지는 다소 시간이 걸릴 것으로 생각됩니다. 당신은 또한 일반 HTML을 작성할 수 있습니다 물론

    <script type="text/javascript"> 
        (function(){var a;if(navigator.platform==="iPad"){ 
         a = window.orientation === 90 || window.orientation === -90 ? 
         "FULLPATH-TO-landscape.jpg":"FULLPATH-TO-portrait.jpg" 
         } else { 
         a = window.devicePixelRatio === 2 ? 
          "FULLPATH-TO-retina.jpg" : "FULLPATH-TO-startup.jpg" 
          } 
        document.write('<link rel="apple-touch-startup-image" href="'+a+'"/>')})() 
    </script>  
    

    ,하지만 난 저자가 모든 시작을 한 것으로 주장과 함께, Mobile Boilerplate 어딘가에이 조각을 발견 한편

    내 페이지 헤드에서 이것을 사용하고 있습니다 모든 장치에 sceens가로드됩니다. 이 스크립트를 사용하면 단일 스플래시 화면 이미지 만 얻고 3 개의 HTTP 요청을 저장하고 불필요한 이미지를로드 할 수 있습니다.

+0

답해 주셔서 감사합니다. 이미지의 너비와 높이는 무엇입니까? – SteMa

+1

hm ... 현재 화면 크기에 따라 4 가지 이미지 크기를 사용하고 있지만 백그라운드 이미지를 첫 번째 CSS 스타일 시트에 삽입하고'background-size : 100 %; background-size : cover '를 사용하여 이미지를 전체 화면을 덮도록 늘립니다. 오늘 밤에 예제를 게시 할 수 있습니다 (여기에 코드가 없습니다). 정말 잘 작동합니다. – frequent