2012-05-03 169 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,它可以为你做:)