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

Question

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

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

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

Answer 1

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

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

示例：

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

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

- 每当用户滚动

时重复

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

Answer 2

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