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>
4

1 回答 1

0

我认为你无法阻止这一点。(可能有一个解决方法很难)

我认为这就是浏览器和渲染的工作方式。只有页面的可见部分被渲染,如果你滚动页面,它必须渲染新的可见区域。直到它显示棋盘。然而,为了节省资源和出于性能原因(避免滚动不稳定),只有在停止滚动时才会进行渲染。

所以解决方法部分:

如果您创建自己的滚动机制,您可以实现您想要的,但也有一些缺点。它可能很慢,这可能会导致某些移动浏览器不兼容等。

基本思想是你把你的内容放在一个“全屏”div中,溢出:隐藏,并使用javascript捕捉(并覆盖)touchstart、touchend、touchmove、touchcancel事件,并自己滚动div的内容,显示你自己的滚动条等。它并不太复杂,但是如果你想用反弹和过度滚动等“正确”地做到这一点,还有很多事情要做。请参阅 iscroll4,它可以为您做到这一点:)

于 2012-05-04T15:17:37.943 回答