为什么用javascript加载一系列图像会有问题？

我在我的网站中加载了一系列带有javascript的图像（50幅图像）以循环浏览，即使它在本地工作得很好，但当网站处于活动状态时，它确实很慢/有问题。我不认为这是一个优化图像的问题，因为它们的文件大小已经相当小了。（每个68kb，总共是1MB）。另外，从同一主机在我的站点上加载4MB gif也要快得多。有什么我可以改变我的代码来改善这一点吗

以下是我目前拥有的：（用于javascript）

我的html相当简单，如下所示：

<img id="animation" src="spacefox_TT/1.jpg">

<div class='image-frame'>
  <img src='/image.jpg' alt='Product Image reel' />
</div>

所以脚本只是增加JPG直到49，然后重复

---

抱歉，如果不清楚，有什么帮助吗！提前感谢

将这些图像从服务器下载到用户的浏览器需要时间，这就是为什么它一开始会出现问题的原因。我建议您使用gif，而不是尝试每50毫秒更改一次图像的src。这样，动画在加载之前不会启动。你的方法不是有缺陷的，只是一般来说效率不高

---

如果您真的想使用您的方法，那么我建议您使用jQuery的

onload

。您可以将

setInterval

包装到某个函数中，并仅在加载所有图像后执行该函数。

如果打开浏览器的开发人员工具并查看网络选项卡，您将看到，您实际上是在排队处理数千个图像请求，而浏览器无法像添加图像那样快速处理这些请求

您有几个选择，但有一件事需要记住，更少的网络请求通常会更好地提高性能，即使您正在提取更大的文件

因此，我建议将50幅图像链接到一幅非常宽的图像中（即50幅大小相同的并排图像）。您的基本HTML如下所示：

<img id="animation" src="spacefox_TT/1.jpg">

<div class='image-frame'>
  <img src='/image.jpg' alt='Product Image reel' />
</div>

---

您可以使用JavaScript对图像应用正负边距，以便在图像之间切换。请注意，宽度、边距和内容需要根据您使用的帧的大小进行调整，我没有仔细查看您当前的图像

您是否尝试每隔

50ms

链接

img

src

<问题中的code>javascript在设置next

src

之前，不会等待

img的
load
完成。嗨！我并不是想每50秒就连锁一次。我不确定如何修改javascript，以便在设置下一个src之前加载img…每个图像应显示的持续时间是多少？谢谢，此响应非常有用！我不想使用gif，因为我不想牺牲图像的质量。很高兴了解onload！谢谢