有没有更好的方法将图像加载到img标签以外的网站?

时间:2017-05-02 16:39:17

标签: html5 css3

我想知道是否有更好的方法将图片加载到<!--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]);

正如您所看到的,这是一个巨大的三百一十六行代码。必须有更好的方式,我希望你能与我分享。提前谢谢。

2 个答案:

答案 0 :(得分:1)

<img> - 元素是要去的元素。

请注意(如果还没有)网络上的照片不应超过500kb的文件大小(至少作为经验法则)。意思是你需要减少照片尺寸并踢出像素。这是一个示例网站,您可以在其中执行此操作: http://jpeg-optimizer.com/

答案 1 :(得分:0)

根据HTML的定义,<img>标记是加载图像的一种方式。您也可以使用背景图像,图形和排序,但最终结果将是相同的,并且必须始终有一个容器来包含图像。

那里有很多代码,但遗憾的是,最终结果有点不可避免。如果您使用渲染工具,它会让您觉得您没有管理它,但最终,一旦代码被渲染,打印结果可能会相同。

对于你的解决方案,可以左右保存几行:

您只能将所有引导列包装在一行中,因为它们使用浮动规则,您将节省一些。

希望这有帮助!