2012-05-03 2 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 для catch (и переопределить) touchstart, touchhend, touchmove, touchcancel events и прокрутить содержимое div самостоятельно, отобразить собственную полосу прокрутки и т. д. Это не слишком сложно, но есть много вещей, которые нужно сделать, если вы хотите сделать это «правильно» с отскоком и прокруткой, и все. См. Iscroll4, он может сделать это для вас :)