在不影响用户体验的情况下加载大量图像

Question

这基本上是一个设计问题。

前言

我有一个显示缩略图列表的网页。图像的数量可以是任何数量，可能是数百个。

我需要做的是这个吗？

• 获取总缩略图的数量。
• 获取每张图片的网址。
• 将每个缩略图加载到一个框（div）中，并动态添加每个框 可滚动的容器div。
• 用户应该能够尽快与盒子互动。

我在页面中发生了其他AJAX调用。

默认方法，将src设置为每个框并将其添加到容器中。加载停止时，图像显示。问题是，所有这些图像加载都会占用网络，而我的其他AJAX调用可能会超时，这是我不能允许的。此外，用户应将页面视为加载完成（加载栏不应显示活动）。

我的解决方案

我提出的解决方案是：

• 使用本地图像作为空间持有者。
• 将所有方框的src设置为本地图像。
• 将第一张图片的src更改为网址。
• 当图像的onload触发时，请更改下一张图像的src，依此类推。

优点：

• 一次只能加载一张图片。
• 用户可以与这些框进行互动。

缺点：

• 一次只有一张图片可能浪费带宽（一次只能拍5张图片？）
• 如果用户滚动到最后会发生什么情况，图像将不会显示，直到所有其他图像都已加载。

您的意见

我需要有关如何改进此解决方案的专家意见。

要求：

1. 某些带宽应该可用于其他AJAX调用
2. 用户应该能够与该页面进行交互。

问题：

此解决方案是否还有其他问题？

这是跨浏览器吗？

我说这不会影响其他AJAX调用吗？