由于图片导致页面加载时负载过大(滞后)

Question

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

​

​

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

这种方法在网站上造成了很大的延迟(超过20秒的冻结)。有没有运行某些东西的选项？如何处理这个问题？

Answer 1

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

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

示例：

-When页面加载只有10张图片(假设这是用户一次在屏幕上看到的数量)

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

每当用户滚动时使用-Repeat

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

Answer 2

我建议获取3个不同分辨率的精灵页面，根据用户的屏幕尺寸加载最好的一个，并使用事件委派将点击事件放在每个精灵上。这应该解决你在问题和评论中提到的所有问题。