阿贾克斯：多张图片的同时加载 [英] Ajax: Simultaneous loading of multiple images

问题描述

我有图片（3×3，肩并肩，在奠定了）的网格。我需要每隔一段时间更新该网格。由于每个画面独立于其他地区（他们从不同的地方抓起），我选出了自己的Ajax回调来加载每一个画面，像这样：

I have a grid of pictures (3x3, side by side, laid out in a ). I need to update this grid every so often. Since every picture independent from the rest (they get grabbed from different locations), I elected to load every picture by its own ajax callback, like so:

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

函数callback_loadPicture（）把图片到其在正确的位置。

The function callback_loadPicture() puts the picture into its proper place in the .

现在的问题是：通常情况下，即使有些图片将完成加载比别人更早，浏览器不会直到最后一个Ajax调用完成后显示任何内容。由于一些电话可能会超时，这意味着我没有看到任何东西，直到该单一画面超时。

The problem is: Often, even though some picture will finish loading sooner than others, the browser will not display anything until the last ajax call is finished. Since some calls can time out, this means that I don't see anything until that single picture times out.

此行​​为稍有不同在每个浏览器：有时画面会显示为回调完成（但通常没有），有的时候，浏览器会显示一些图像，但推迟显示所有，直到最后一个完成加载

This behaves slightly differently in every browser: sometimes the picture will show as the callbacks finish (but usually not), sometimes the browser will show some images, but postpone showing all until the last one is finished loading.

我使用的：

• 的Django 1.3（蟒蛇2.7）
• 的Windows x64为（试验）服务器
• dajaxice为Ajax实施

我愿意改变我的code的结构。

I am open to changing the structure of my code.

任何意见或建议将AP preciated。

Any comments or suggestions will be appreciated.

推荐答案

由于Ajax调用阻塞地chrisdpratt的说，如果你真的需要同时显示图像我会建议某种preloading图像的3×3格，并用$ C $需要时c可以显示它们。

Since the ajax calls are blocking as said by chrisdpratt, if you really need to display the images at the same time I would advise some kind of preloading of the 3x3 grid of images and when required by the code you can display them.

考虑到这一点，你可以运行code，你已经对 $（文件）。就绪（），但使图像隐藏（即显示：无）。当以后需要你只需更改你需要显示图像的显示属性。

With this in mind you can run the code you already have on $(document).ready() but make the images hidden (ie display:none). When later required you would just change the display attribute on the images you need to display.

这篇关于阿贾克斯：多张图片的同时加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！