由于图像，加载页面时负载较大（滞后）

Question

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

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

这种方法在网站上造成大量LAG（超过20秒冻结）。 有什么选择可以运行吗？ 怎么处理这个？

Answer 1

解决方案是仅加载您需要的图像。 我非常怀疑用户可以同时看到1880张图像。

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

例：

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

- 当用户开始滚动时，他应该看到新的图像。 所以onscroll你发起你的10个新图像的ajax请求。

- 每当用户滚动时重复

当然，根据您尝试的操作，上述步骤需要以不同方式进行调整/操作

Answer 2

我建议以不同的分辨率获得3张精灵表，为用户的屏幕大小加载最好的精灵表，并使用事件委派将点击事件放在每个精灵上。 这应该解决您在问题和评论中提到的所有内容。