相同的图像名称但来自不同的文件夹是否会影响 Web 应用程序中的性能

Question

我的网页中有很多同名但文件夹不同的图像，例如

<div class="wrapper">
  <div id="pictures1" class="effect_1">
    <div><img src="pictures/sample/1/01/1/01.jpg" width="125" height="188"></div>
    <div><img src="pictures/sample/1/01/1/02.jpg" width="125" height="188"></div>
    <div><img src="pictures/sample/1/01/1/03.jpg" width="125" height="188"></div>
    <div><img src="pictures/sample/1/01/1/04.jpg" width="125" height="188"></div>
    <div><img src="pictures/sample/1/01/1/05.jpg" width="125" height="188"></div>
    <div><img src="pictures/sample/1/01/1/06.jpg" width="125" height="188"></div>
    <div><img src="pictures/sample/1/01/1/07.jpg" width="125" height="188"></div>
    <div><img src="pictures/sample/1/01/1/08.jpg" width="125" height="188"></div>
    <div><img src="pictures/sample/1/01/1/09.jpg" width="125" height="188"></div>
    <div><img src="pictures/sample/1/01/1/10.jpg" width="125" height="188"></div>
    <div><img src="pictures/sample/x.gif" width="125" height="188"></div>
 </div>
  <div id="pictures2" class="effect_2">
    <div><img src="pictures/sample/1/02/1/01.jpg" width="125" height="188"></div>
    <div><img src="pictures/sample/1/02/1/02.jpg" width="125" height="188"></div>
    <div><img src="pictures/sample/1/02/1/03.jpg" width="125" height="188"></div>
    <div><img src="pictures/sample/1/02/1/04.jpg" width="125" height="188"></div>
    <div><img src="pictures/sample/1/02/1/05.jpg" width="125" height="188"></div>
    <div><img src="pictures/sample/1/02/1/06.jpg" width="125" height="188"></div>
    <div><img src="pictures/sample/1/02/1/07.jpg" width="125" height="188"></div>
    <div><img src="pictures/sample/1/02/1/08.jpg" width="125" height="188"></div>
    <div><img src="pictures/sample/1/02/1/09.jpg" width="125" height="188"></div>
    <div><img src="pictures/sample/1/02/1/10.jpg" width="125" height="188"></div>
    <div><img src="pictures/sample/x.gif" width="125" height="188"></div>
 </div>
  ..................... up to 09/../../.jpg
</div>

我的页面中有很多图像，这只是示例，当我运行我的应用程序时，加载需要太多时间并突然崩溃......为什么？

Answer 1

每个图像的大小（KB 或 MB）是多少？

如果您的图像很大，浏览器需要时间来下载它们。

您指定的width和height仅用于显示原因。

例如如果你的图像是3MB（2000x2000像素），浏览器将下载第一个图像（3MB），然后以你给他的宽度/高度显示它。

Answer 2

你只有这个静态的html，还是除了html之外还有php或其他代码？如果有，请提供给我们。

仅使用 html 加载非常小的图像应该没有任何问题。用其他浏览器试过吗？

Answer 3

将文件放在不同的位置会影响页面的链接，这就是为什么路径如此重要的原因。路径用于创建指向与当前文档位于不同文件夹中的文件的链接。要进行链接，您必须指定文件的正确位置或路径，以便浏览器可以找到它。

<div class="wrapper">
  <div id="pictures1" class="effect_1">
    <div><img src="/pictures/sample/1/01/1/01.jpg" width="125" height="188"><img /></div>
    <div><img src="/pictures/sample/1/01/1/02.jpg" width="125" height="188"><img /></div>
 </div>
  <div id="pictures2" class="effect_2">
    <div><img src="/pictures/sample/1/02/1/01.jpg" width="125" height="188"><img /></div>
    <div><img src="/pictures/sample/1/02/1/02.jpg" width="125" height="188"><img /></div>
</div>