html - 有没有比 img 标签更好的方法将图像加载到网站上？-6ren

html - 有没有比 img 标签更好的方法将图像加载到网站上？

转载作者：行者123 更新时间：2023-11-28 17:16:41

我想知道是否有比 <img> 更好的方法将图像加载到 HTML 文件中标签。我问这个是因为我正在建立一个有照片库的网站。这个照片库有 48 张图片，似乎需要很长时间才能加载。

这是我为这个页面编写的 HTML 代码:

<!--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>

如您所见，这是一个巨大的 316 行代码。一定有更好的方法，希望您能与我分享。提前致谢。

最佳答案

<img> -element 是一个值得追求的元素。

请注意(如果不是)网络上的照片文件大小不应超过 500kb(至少根据经验)。这意味着您需要减小照片尺寸并剔除像素。这是一个示例网站，您可以在其中执行此操作: http://jpeg-optimizer.com/

关于html - 有没有比 img 标签更好的方法将图像加载到网站上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43743122/

文章推荐： html - CSS 列表悬停子项

文章推荐： python - Python 中的 yield 问题 |使用辅助函数

文章推荐： javascript - 想要 Bxslider Pager 直接滑动到合适的幻灯片

html - 是完全不渲染 HTML 更好，还是添加显示 :none? 更好
据我所知，根本不为元素呈现 HTML，或添加 display:none，似乎具有完全相同的行为:两者都使元素消失并且不与 HTML 交互。我正在尝试禁用和隐藏一个复选框。所以HTML的总量很小；我无
android - 在单个进程中使用 AsyncTask(或 Timer)更好，还是在单独的进程中使用 Service 更好？
我刚刚读了Android Architecture Tutorial: Developing an App with a Background Service (using IPC) .基本上是让服
mysql - 在 SELECT 中使用 SUM() 更好，还是在 SUB-SELECT 中使用 SUM() 更好？
我有两个查询具有相同的结果，现在我想知道哪个查询更优化？在选择中: select t1.*, sum(t2.value) as total_votes from table1 t1 left joi
blocking - 为什么 cpu bound 对阻塞 I/O 更好，而 I/O bound 对非阻塞 I/O 更好
有人告诉我，对于 I/O 绑定(bind)的应用程序，非阻塞 I/O 会更好。对于 CPU 密集型应用程序，阻塞 I/O 会好得多。我找不到这种说法的原因。试过谷歌，但很少有文章只是触及这个话题而没有
python - 使复杂性更小(更好)
我有一个算法可以在数字列表中寻找好的对。一个好的配对被认为是索引 i 小于 j 且 arr[i] 1: # Finding the mid of the array
python - 使复杂性更小(更好)
我有一个算法可以在数字列表中寻找好的对。一个好的配对被认为是索引 i 小于 j 且 arr[i] 1: # Finding the mid of the array
javascript - 更好/更快地修改嵌套对象不同深度下找到的所有匹配属性的方法
我从 API 收到一个 json，我需要解析并修改一个属性值。问题是，我收到的 json 数据的嵌套结构不一致，我无法控制它。这将禁止我指定在特定深度(如 parsedJson.children[0
mysql - 哪一个运行起来更安全/更好？
我有 451 个城市的坐标。现在我想计算每个城市之间的距离，然后根据该距离对一些结果进行排序。现在我有两个选择: 我可以运行一个循环来计算每个可能的城市组合的距离并将它们存储到一个表中，这将产生大约
sql - 哪个查询计划更快/更好
对于返回相同结果的不同查询，我有两个查询计划我想知道是否有人可以告诉我哪个“更好”，以及为什么。 SELECT * FROM bids order by (select ranking from us
android - 请解释阵列适配器及其用途。更好
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 7 年前。 Improve this qu
c++ - 执行直接指针操作还是 [] 更好
我有一个二维数组。我需要尽可能快地对其执行一些操作(函数每秒将被调用十几次，所以让它变得高效会很好)。现在，假设我想获取元素 A[i][j]，简单地使用 A[i][j] 在速度上有什么不同吗和 *(
c# - 什么时候在字符串前使用@更好？
在声明或使用字符串的代码中，我通常会看到开发人员这样声明它: string randomString = @"C:\Random\RandomFolder\ThisFile.xml"; 代替: str
html - 为什么把所有的标签都写成一种样式比使用通用选择器(*)更好？
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Why don't CSS resets use '*' to cover all elements? 我正
python - 更好/更快地循环遍历集合或列表？
如果我有一个包含许多重复项的 python 列表，并且我想遍历每个项目，而不是重复项，最好使用一个集合(如 set(mylist)，或者找到另一种方法来创建没有重复的列表？我想只是循环遍历列表并检查重
java - 没有实例的最终常量类如何比常量接口(interface)更好？
在阅读常量接口(interface)反模式时，我发现没有实例的最终常量类比常量接口(interface)更好。请解释一下怎么做？ public interface ConstIfc { publ
C:为什么 &= 比 = 更好？
我正在查看我继承的一些旧代码，我真的不喜欢某些地方的风格。我真的不喜欢它的外观的一件事是: bool func() { bool ret = true; ret &= test1();
java - @Path 注解中的路径参数，更好
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 4 年前。 Improv
c++ - 访问者模式是否比受控使用 RTTI 更好？
我经常发现自己试图使用 boost/QT 信号解耦对象。实现这一点的简单方法是针对我要通信的每个具体类型，创建一个新的信号和插槽签名并连接所有相关对象。这导致了访问者模式，理想情况下我想发出一个访问者
java - 为什么这段代码片段中的 lambda 更好？
我正在 https://docs.oracle.com/javase/tutorial/java/javaOO/lambdaexpressions.html 上阅读有关 lambda 的内容在方法
java - 为什么从创建列表的方法返回 unmodifyingList 更好？
public List getInts() { List xs = new ArrayList(); xs.add(1); // return Collections.unmo

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 有没有比 img 标签更好的方法将图像加载到网站上？