2012-05-03 210 views
0

當在我的移動網站上向下滾動頁面時,內容消失並顯示灰色和白色小方塊。一旦停止滾動,內容會重新出現。移動網站滾動

有沒有辦法來防止這種情況發生?

我的代碼:

<html> 
    <head> 
     <title>PHP Test</title> 
     <!-- Code within Head Tag --> 
     <script type="text/javascript" src="jquery.js"></script> 
     <script type="text/javascript"> 
      $(window).load(function(){ 
       $("#loading").hide();  
      }) 
     </script> 
     <!-- Code within Head Tag --> 

     <style type="text/css"> 
      /* Document Styles */ 

      #wrapper{ 
       width:800px; 
       height:500px; 
       margin:0 auto; 
       padding:5px; 
       border:1px solid #CCC; 
       background:#CCC; 
      } 
      .desc{ 
       margin:5 auto; 
       width:800px; 
       text-align:left; 
      } 

      /* Loading Div Style */ 
      #loading{ 
       position:absolute; 
       width:300px; 
       top:0px; 
       left:0%; 
       margin-left:5px; 
       text-align:left; 
       padding:7px 0 0 0; 
       font:bold 11px Arial, Helvetica, sans-serif; 
      } 
      body { 
       overflow: hidden 
      } 
     </style> 
     <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
     <meta name="format-detection" content="telephone=no"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    </head> 
    <body> 
     <center> 
      <form> 
       <!-- Loading Div --> 
       <div id="loading"> 
        Fetching Hotels, please wait.. 
        <img src="loading.gif" alt="loading.." /> 
       </div> 
       <!-- Loading Div --> 
       <br> 
       <input type=text value="destination" name=title onclick="this.value = '';"><br> 
       Date:<br> 
       <select name="month"> 
        <option value="1">January 
        <option value="2">February 
        <option value="3">March 
        <option value="4">April 
        <option value="5">May 
        <option value="6">June 
        <option value="7">July 
        <option value="8">August 
        <option value="9">September 
        <option value="10">October 
        <option value="11">November 
        <option value="12">December 
       </select> 
       <select name="day"> 
        <option value="1">1 
        <option value="2">2 
        <option value="3">3 
        <option value="4">4 
        <option value="5">5 
        <option value="6">6 
        <option value="7">7 
        <option value="8">8 
        <option value="9">9 
        <option value="10">10 
        <option value="11">11 
        <option value="12">12 
        <option value="13">13 
        <option value="14">14 
        <option value="15">15 
        <option value="16">16 
        <option value="17">17 
        <option value="18">18 
        <option value="19">19 
        <option value="20">20 
        <option value="21">21 
        <option value="22">22 
        <option value="23">23 
        <option value="24">24 
        <option value="25">25 
        <option value="26">26 
        <option value="27">27 
        <option value="28">28 
        <option value="29">29 
        <option value="30">30 
        <option value="31">31 
       </select> 
       <select name="year"> 
        <option value="2012">2012 
        <option value="2013">2013 
        <option value="2014">2014 
       </select> 
       <br><br> 
       No. of Nights: 
       <select name="nights"> 
        <option value="1">1 
        <option value="2">2 
        <option value="3">3 
        <option value="4">4 
        <option value="5">5 
        <option value="6">6 
        <option value="7">7 
        <option value="8">8 
        <option value="9">9 
        <option value="10">10 
        <option value="11">11 
        <option value="12">12 
        <option value="13">13 
        <option value="14">14 
        <option value="15">15 
        <option value="16">16 
        <option value="17">17 
        <option value="18">18 
       </select> 

       <input type=submit> 

       <?php 
        // specify url of xml file 
        $url = "http://xmlfeed.laterooms.com/index.aspx?aid=1000&rtype=4&kword=".$_GET['title']."&sdate=".$_GET['year']."-".$_GET['month']."-".$_GET['day']."&nights=".$_GET['nights']."&orderby=hoteldistance&sortorder=asc"; 
        // get xml file contents 
        $xml = simplexml_load_file($url); 

        // loop begins 
        $i = 0; 
        foreach($xml->hotel as $hotel) 
        { 
         if (++$i > 20) { 
          // stop after 5 loops 
          break; 
         } 
         // begin new paragraph 
         echo "<p>"; 
         echo "<img src=".$hotel->images." height=100 width=100><br/>"; 
         echo "<strong>Hotel Name:</strong> ".$hotel->hotel_name."<br/>"; 
         echo "<strong>Prices From:</strong> &pound;".$hotel->prices_from."<br/>"; 
         echo "<a href=".$hotel->hotel_link."><img src=http://affiliates.laterooms.com/AffiliateImages/en/buttons/more_details1.gif></a><br/>"; 
         echo "<strong>Miles from ".$_GET['title']."</strong> ".$hotel->hotel_distance."<br/>"; 
         echo "</p>"; 
         // end paragraph 
        } 
        $cnt++; 
        // loop ends  
       ?>  
      </form> 
     </center> 
    </body> 
</html> 

回答

0

我想你不能阻止這一點。 (可能有一個解決方法很難)

我想這是瀏覽器和渲染的工作原理。只有頁面的可見部分被渲染,如果你滾動頁面,它必須渲染新的可見區域。直到它顯示棋盤。但是,爲了節省資源和性能方面的原因(爲了避免不連貫的滾動),只有在停止滾動時纔會進行渲染。

所以解決方法的一部分:

如果你創建自己的滾動機制,你可以達到你想要的東西,但也有一些缺點。它可能會很慢,這可能會導致一些移動瀏覽器不兼容等。

基本的想法是,你把你的內容放在一個「全屏」div與溢出:隱藏,並使用JavaScript來捕捉(並覆蓋)touchstart,touchend,touchmove,touchcancel事件,並自動滾動div的內容,顯示您自己的滾動條等等。它不是太複雜,但如果您想要做很多事情要做它與反彈和過度滾動以及一切都「正確」。看到iscroll4,它可以爲你做:)