在我的移动网站上向下滚动页面时，内容会消失并显示小灰色和白色方块。停止滚动后，内容会重新出现。
有没有办法防止这种情况发生？
我的代码：
<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> £".$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 :(得分：0)
我认为你不能阻止这一点。 （可能存在难以解决的问题）
我认为这是浏览器和渲染的工作方式。仅渲染页面的可见部分，如果滚动页面，则必须渲染新的可见区域。直到它显示棋盘格。但是，为了节省资源和性能原因（以避免不连贯的滚动），只有在停止滚动时才会进行渲染。
所以解决方法部分：
如果您创建自己的滚动机制，您可以实现您想要的，但有一些缺点。它可能很慢，这可能会导致某些移动浏览器等不兼容。
基本的想法是你将内容放在一个带有overflow：hidden的“全屏”div中，并使用javascript来捕获（并覆盖）touchstart，touchend，touchmove，touchcancel事件，并滚动div的内容你自己，显示你自己的滚动条等。这不是太复杂，但如果你想通过弹跳和过度滚动以及一切都“正确”地完成它，还有很多事情要做。请参阅iscroll4，它可以为您做到这一点：）