jquery splash screen điện thoại di động với javascript

Tôi đang tìm cách tránh sử dụng này cho màn hình giật gân, bởi vì nó không hoạt động trên tất cả các thiết bị và vì những lý do khác:jquery splash screen điện thoại di động với javascript

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

Vì vậy, tôi đang cố gắng để sử dụng này thay vào đó và nó hoạt động tốt cho đến khi nó trượt vào một trang mới, sau đó được xử lý như màn hình splash lần nữa (ví dụ: nó sẽ trống khi hết thời gian - trong trường hợp này là 4 giây). Làm thế nào tôi có thể dừng/hạn chế hành vi này, do đó, changePage vẫn chỉ chứa trong trang splash?

<body> 
<div data-role="page" id="splash"> 
    <div class="splash"> 
    <img src="startup.jpg" alt="startup image" /> 

<script type='text/javascript'>//<![CDATA[ 
      $(window).load(function(){ 
      $(function() { 
       setTimeout(hideSplash, 4000); 
         }); 

      function hideSplash() { 
      $.mobile.changePage("#home", "fade"); 
      } 


      });//]]> 
     </script> 

    </div> 
</div> 

<div data-role="page" id="home"> 
    <div data-role="header" data-backbtn="false"> 
    <h1></h1> 
    </div> 
    <div data-role="content"> 

    </div> 
</div> 
</body>

Nguồn

2012-05-26 user1418581

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

là thực sự chỉ dành cho thiết bị di động táo.

Màn hình splash thực sự chỉ nên ở đó để hiển thị cho bạn một bức ảnh đẹp trong khi bạn đang đợi. Mục tiêu của nó không phải là để làm cho bạn chờ đợi vì lý do thực sự. Trong trường hợp của bạn, nó mất 4 giây trong cuộc sống của người dùng của bạn chỉ để làm cho nó trông thật tuyệt.

Tôi đã sửa đổi mã của bạn và đặt mã trong số này jsfiddle: bạn sẽ thấy nó hoạt động ngay bây giờ. Đối với các splashscreen để có chiều rộng đầy đủ/chiều cao chỉnh sửa css để loại bỏ các lề. Tôi đã đặt bộ đếm thời gian thành 2 giây, đó là quá đủ tôi nghĩ.

Nguồn

2012-05-26 08:41:26 chrisben

Rằng 4 giây mặc dù sẽ tuyệt vời từ quan điểm xây dựng thương hiệu và cũng để làm cho ứng dụng web của bạn cảm thấy hơi bản địa hơn. Oh và btw phương thức .live() không được chấp nhận. Có một số vấn đề đã biết với nó. Xem http://api.jquery.com/live/ – codaniel

Cảm ơn phản hồi của bạn - được đánh giá cao. – user1418581

Ý tưởng hay ở đây là những gì tôi đang nghĩ. Sử dụng các trang đơn thay vì nhiều trang (nhiều dữ liệu-role = trang). Đối với index.html hoặc index.php hoặc bất kỳ thứ gì. Đặt trang splash của bạn. Lý do cho điều này tôi sẽ giải thích sau này.

index.html

<head> 
    <!-- First include all jquery stuff --> 
    <script src="app.js"></script><!-- external script because we can just include it in every page --> 
</head> 
<body> 
    <div data-role="page" id="splash"> 
     <div class="splash"> 
      <img src="startup.jpg" alt="startup image" /> 
     </div> 
    </div> 
</body>

app.js

$(document).on('pageinit','#splash',function(){ // the .on() method does require jQuery 1.7 + but this will allow you to have the contained code only run when the #splash page is initialized. 
    setTimeout(function(){ 
     $.mobile.changePage("home.html", "fade"); 
    }, 4000); 
});

Ok vì vậy tôi đã làm nó theo cách này vì cho phép nói rằng bạn có menu điều hướng và bạn muốn đưa mọi người trở lại trang chủ. Bạn sẽ không phải hiển thị lại trang splash. Bạn chỉ có thể liên kết đến home.html. Ngoài ra chia nhỏ các trang của bạn sẽ giúp giữ cho mái vòm gọn gàng hơn. Tôi hi vọng cái này giúp được.

Nguồn

2012-05-26 10:25:43 codaniel

Cảm ơn bạn đã yêu cầu phản hồi của bạn. Rất hữu ích. – user1418581

Hoạt động tốt với một trang duy nhất – JamesC

jquery splash screen điện thoại di động với javascript

Trả lời

Các vấn đề liên quan