Javascript 加载页面时由于图像而导致大加载（延迟）

我现在面临这个问题。当我的页面加载（DOM）时，我调用一个返回1880个图像的函数，这些图像存储在steam服务器中

在回调返回1880个元素的数组响应（指向图像和一些信息的链接）之后，这些图像被添加到我的DOM中。回调之后，这些图像将被构建到DOM中，如前所述

---

这种方法会在网站上造成很大的延迟（超过20秒）。是否有运行某个程序的选项？如何处理这个问题？

解决方案是只加载您需要的图像。我非常怀疑用户是否能一次看到1880张图片

页面加载后，您可以使用任何框架向服务器发送一个异步js请求，以获取其余图像

例如：

-当页面加载时，只有10个图像（假设用户一次在屏幕上看到的图像数量）

-当用户开始滚动时，他应该会看到新的图像。因此，在Croll上启动10个新图像的ajax请求

-每当用户滚动时重复此操作

---

当然，根据您尝试执行的操作，需要对上述步骤进行不同的调整/优化

我建议获得3张不同分辨率的精灵图纸，根据用户屏幕大小加载最佳图纸，并使用事件委派在每个精灵上放置单击事件。这应该可以解决您在问题和评论中提到的所有问题。

页面加载时不加载图像，您能否仅在用户需要时加载图像？谢谢Jason，但用户在页面加载时也需要图像。它可以通过添加（滚动）来完成，但问题是页面上满是30x30的图像，并且分辨率为1920px，这会导致同样的问题。这些图像像图标图像吗？另一个选择是有一个大图像，其中包含所有小图像。然后用定位来显示它。@Sandra怎么会这样？假设页面一次可以容纳120个这样的图像，如果您实现一个异步解决方案（在用户滚动时使用Ajax加载图像），我完全相信页面加载时间会有很大的改进。您也可以使用，而不是在每个图像上放置单击事件。这也应该提高性能。这是解决方案，但不是我需要的，如果我需要在整个网站上显示30x30的图像，而用户的分辨率为1920px，该怎么办。问题是相同的——许多图像。“用户具有1920像素的分辨率”你这是什么意思？用户是否有大量的小图像可以点击显示1920像素分辨率的图像？我的网站上满是这些图像（30x30，中间只有1px的边距），1920像素分辨率的显示器可能可以容纳±700个图像？因此，结果是一样的——如果您也实现了该解决方案，您不会损失任何东西。你必须用许多不同的方法来解决这个问题，如果每种方法都只需2秒钟，你就会做得很好。如果你所有的图像都很小，你可以使用某种压缩来发送一个文件，然后在前端将其分割（可能比发送800个单独的http请求更好）。另外，动态创建DOM元素也会增加延迟。编辑：我的意思是，如果在文件中设置了固定数量的图像，那么即使您仍然发送1000多个请求（即使您应该避免这样做），1880个不同的、非静态的图像，也比动态地确定所需图像的数量和DOM的配置要好。加载什么图像取决于用户。这没关系，你仍然可以使用精灵表。为什么？你的意思是下载页面加载中的图像，然后将它们全部放在一个精灵表中，并保留每个图像在数组中的位置或其他什么？你需要谷歌“精灵表”。这是一个单一的图像，上面有你所有的图像。您可以使用jQuery或JavaScript将正确的图像放置在网站上的正确位置。