我想知道是否有更好的方法将图片加载到<!--IMAGES-->
<div class="container">
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/Africabound_1.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0226.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0232.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0299.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0330.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0364.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0374.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0392.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0425.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0480.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0543.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0548.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0566.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0615.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN0841.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN0902.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN0909.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN0914.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN0929.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN0957.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN0970.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1024.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1034.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1065.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1095.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1099.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1128.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1130.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1134.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1179.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1221.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1283.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1312.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1313.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1342.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1404.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1417.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1528.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1541.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1623.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1624.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/IMG_1836.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/IMG_1849.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/Photo May 14, 01 17 06.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/Photo May 14, 01 22 01.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/Photo May 14, 02 05 57.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/Photo May 14, 02 28 54.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/Photo May 14, 03 54 52.JPG">
</div>
</div>
</div>
</div>
</body>
</html>
<head>
标记以外的HTML文件中。我问这个是因为我正在建立一个有照片库的网站。这个照片库有48张图片,似乎需要永远加载。
以下是此页面的HTML代码:
marker.setLatLng([lat, long]);
正如您所看到的,这是一个巨大的三百一十六行代码。必须有更好的方式,我希望你能与我分享。提前谢谢。
答案 0 :(得分:1)
<img>
- 元素是要去的元素。
请注意(如果还没有)网络上的照片不应超过500kb的文件大小(至少作为经验法则)。意思是你需要减少照片尺寸并踢出像素。这是一个示例网站,您可以在其中执行此操作: http://jpeg-optimizer.com/
答案 1 :(得分:0)
根据HTML的定义,<img>
标记是加载图像的一种方式。您也可以使用背景图像,图形和排序,但最终结果将是相同的,并且必须始终有一个容器来包含图像。
那里有很多代码,但遗憾的是,最终结果有点不可避免。如果您使用渲染工具,它会让您觉得您没有管理它,但最终,一旦代码被渲染,打印结果可能会相同。
对于你的解决方案,可以左右保存几行:
您只能将所有引导列包装在一行中,因为它们使用浮动规则,您将节省一些。
希望这有帮助!