Ajax：同时加载多个图像答案

【问题标题】：Ajax: Simultaneous loading of multiple imagesAjax：同时加载多个图像
【发布时间】：2011-11-22 04:29:14
【问题描述】：

我有一个图片网格（3x3，并排，布置在 a 中）。我需要经常更新这个网格。由于每张图片都独立于其他图片（它们是从不同位置抓取的），我选择通过自己的 ajax 回调加载每张图片，如下所示：

for (var i=0; i < numPictures; i++) {
  Dajaxice.loadPicture(callback_loadPicture, {'picture_id':i})
}

函数 callback_loadPicture() 将图片放到 .

问题是：通常，即使某些图片会比其他图片更快地完成加载，浏览器在最后一次 ajax 调用完成之前不会显示任何内容。由于某些调用可能会超时，这意味着在该单张图片超时之前我什么都看不到。

这在每个浏览器中的行为略有不同：有时图片会在回调完成时显示（但通常不会），有时浏览器会显示一些图片，但推迟显示所有图片，直到最后一张完成加载。

我正在使用：

我愿意改变我的代码结构。

任何 cmet 或建议将不胜感激。

【问题讨论】：

所以您在开发中看到了这种行为，大概是在使用 runserver 管理命令时？ Django 开发 Web 服务器是单线程的：它一次只能处理一个请求。因此，与生产 Web 服务器不同，每个 AJAX 调用都是阻塞的。

【解决方案1】：

如果您看到的问题确实是由 Django 开发服务器的单线程实现引起的，您可以尝试 django-devserver (https://github.com/dcramer/django-devserver)。除其他改进外，它还拥有：

“改进的运行服务器允许您同时处理请求。”

其他改进也值得！

【讨论】：

【解决方案2】：

正如 chrisdpratt 所说，由于 ajax 调用被阻塞，如果您确实需要同时显示图像，我建议您对 3x3 图像网格进行某种预加载，并在代码需要时显示它们。

考虑到这一点，您可以在$(document).ready() 上运行已有的代码，但隐藏图像（即display:none）。以后需要时，您只需更改需要显示的图像的显示属性即可。

【讨论】：