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

Question

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

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

Answer 1

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

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

Answer 2

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

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

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

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

希望这有帮助！