记得以前做网页的时候,如果页面内容特别多,需要把页面做成好多独立的"层",例如:
<body>
<div>第一层</div>
<table>第二层</table>
<div>第三层</div>
......
</body>
这样的话,当网速慢的时候,不会半天没有显示,内容会逐步显示出来。
今天和美工说起,他说,只要是div的,都能慢慢显示出来,table则不会。为了确定,于是做了下实验。
结论是,无论是大量图片在div还是在table里面,都能逐步显示。
测试过程如下
我用 fiddler web debugger限制了网速,做了几个页面:
开始的文字 <img src="images/m0.jpg" width="200" height="129" /> <img src="images/m1.jpg" width="200" height="129" /> <img src="images/m2.jpg" width="200" height="129" /> <img src="images/m3.jpg" width="200" height="129" /> <img src="images/m4.jpg" width="200" height="129" /> <img src="images/m5.jpg" width="200" height="129" /> <img src="images/m6.jpg" width="200" height="129" /> <img src="images/m7.jpg" width="200" height="129" /> <img src="images/m8.jpg" width="200" height="129" /> <img src="images/m9.jpg" width="200" height="129" />
<p>结束的文字 </p>
<p>结束的文字 </p>
<p>结束的文字 </p>
<p>结束的文字 </p>
<body>
开始的文字
<div>
<div> <img src="images/m0.jpg" width="200" height="129" /> </div>
<div> <img src="images/m1.jpg" width="200" height="129" /> </div>
<div> <img src="images/m2.jpg" width="200" height="129" /> </div>
<div> <img src="images/m3.jpg" width="200" height="129" /> </div>
<div> <img src="images/m4.jpg" width="200" height="129" /> </div>
<div> <img src="images/m5.jpg" width="200" height="129" /> </div>
<div> <img src="images/m6.jpg" width="200" height="129" /> </div>
<div> <img src="images/m7.jpg" width="200" height="129" /> </div>
<div> <img src="images/m8.jpg" width="200" height="129" /> </div>
<div> <img src="images/m9.jpg" width="200" height="129" /> </div>
</div>
<p>结束的文字 </p>
<p>结束的文字 </p>
<p>结束的文字 </p>
<p>结束的文字 </p>
</body>
<body>
开始的文字
<table width="900" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/m0.jpg" width="200" height="129" /></td>
<td><img src="images/m1.jpg" width="200" height="129" /></td>
</tr>
<tr>
<td><img src="images/m2.jpg" width="200" height="129" /></td>
<td><img src="images/m3.jpg" width="200" height="129" /></td>
</tr>
<tr>
<td><img src="images/m4.jpg" width="200" height="129" /></td>
<td><img src="images/m5.jpg" width="200" height="129" /></td>
</tr>
<tr>
<td><img src="images/m6.jpg" width="200" height="129" /></td>
<td><img src="images/m7.jpg" width="200" height="129" /></td>
</tr>
<tr>
<td><img src="images/m8.jpg" width="200" height="129" /></td>
<td><img src="images/m9.jpg" width="200" height="129" /></td>
</tr>
</table>
<p>结束的文字 </p>
<p>结束的文字 </p>
<p>结束的文字 </p>
<p>结束的文字 </p>
</body>
<body>
开始的文字
<ul>
<li><img src="images/m0.jpg" width="200" height="129" /> </li>
<li><img src="images/m1.jpg" width="200" height="129" /> </li>
<li><img src="images/m2.jpg" width="200" height="129" /> </li>
<li><img src="images/m3.jpg" width="200" height="129" /> </li>
<li><img src="images/m4.jpg" width="200" height="129" /> </li>
<li><img src="images/m5.jpg" width="200" height="129" /> </li>
<li><img src="images/m6.jpg" width="200" height="129" /> </li>
<li><img src="images/m7.jpg" width="200" height="129" /> </li>
<li><img src="images/m8.jpg" width="200" height="129" /> </li>
<li><img src="images/m9.jpg" width="200" height="129" /> </li>
</ul>
<p>结束的文字 </p>
<p>结束的文字 </p>
<p>结束的文字 </p>
<p>结束的文字 </p>
</body>
测试结果发现,无论是div,li或者table,都能够逐步显示。
也许是我记错了,也许是现在浏览器变聪明了,结论就是,现在不用担心了,无论是有图片在div还是table里面,都能逐步显示。