如何優化渲染以下HTML代碼段

<table> 
    <tr> 
    <td><img src="http://www.foo.com/a.img"></img></td> 
    <td><img src="http://www.foo.com/a.img"></img></td> 
    <td><img src="http://www.foo.com/a.img"></img></td> 
    <td><img src="http://www.foo.com/a.img"></img></td> 
    <td><img src="http://www.foo.com/a.img"></img></td> 
    </tr> 
</table>

上面的代碼片段顯示了<tr>中的5個<td>元素。 <td>內的所有內容都是相似的。有沒有一種方法來優化這個，以便我可以通過某種形式的重複來處理這個問題（例如，與for循環非常相似）。如何優化渲染以下HTML代碼段

來源

2011-05-18 Joe

你使用的是jQuery嗎？ – jimy 2011-05-18 06:26:43

您是否問如何以更高效的方式生成此HTML？如果是的話，你使用什麼語言？否則，我不相信有什麼方法可以在原始HTML中縮短這一點，而無需使用JavaScript或某些服務器端代碼來生成它。 – 2011-05-18 06:27:52

你可以有一個背景重複 – Ibu 2011-05-18 06:29:25

<style type='text/css'> 
    .imageRepeat { 
     width: 200px; /* image width*/ 
     height:1000px; /* height times the number of images */ 
     background-image: url('http://www.foo.com/a.img'); 
    } 
</style> 

<div class='imageRepeat'> 
<!-- place holder for background image --> 

</div>

空div將保留顯示圖像的位置x您想要的次數。也就是說，如果您嘗試重複相同的圖像;

來源

2011-05-18 06:34:16 Ibu

如果所有的圖像需要是不同的（或者，如果你不能使用某種原因，背景圖片），我會浮在圖片：

<style> 
img.float { 
    float:left; 
    clear:right; 
} 
</style> 

<img src="http://placekitten.com/200/200" alt="" class="float" /> 
<img src="http://placekitten.com/200/200" alt=""class="float" /> 
<img src="http://placekitten.com/200/200" alt=""class="float" /> 
<img src="http://placekitten.com/200/200" alt=""class="float" /> 
<img src="http://placekitten.com/200/200" alt=""class="float" />

這將上顯示的所有圖像的自己的路線。

來源

2011-05-18 08:53:51 whostolemyhat

如何優化渲染以下HTML代碼段

回答

相關問題