页面刷新时图像损坏？

Question

我使用 Ajax 从数据库中提取数据，并使用图像元素动态填充 div 标签。图像文件名与数据库中的数据相对应。

例如，如果数据库中有一个名为“foo”的内容，我有一个名为“img/foo.jpg”的项目

如果“img/foo.jpg”设置了类，我的 javascript 会提取数据并使用 src 创建一个图像，然后将其写入正确的 div。

在大多数情况下，这会按预期工作，但偶尔在刷新时（我让它查询数据库，清除所有 div，并每 30 秒重写节点），有时某些图像会损坏/无法加载。哪一个发生没有任何押韵或理由，有时它没有发生在任何人身上，有时却发生在几个人身上。

如果您右键单击->显示图像，手动刷新，或等待它再次拉取数据，它将按预期显示图像。因此，我知道数据正在正确提取和写入，但它似乎无法加载图像。

有谁知道为什么或如何解决这个问题？

Answer 1

使用Firebug插件在Firefox中尝试，启用Net面板，您可能会看到为什么图像的提取失败。

Answer 2

如果这不是一个好的答案，我深表歉意，但如果您的页面上有很多图像，则可能是浏览器（不仅限于 IE6）尚未下载所有图像的数据。

如果您“清除所有 div，并每 30 秒重写节点”，您可能会遇到 Microsoft 支持问题所暗示的问题“如何配置 Internet Explorer 以同时下载两个以上文件？”。您可能会注意到正在下载图像。

您可能会发现串行更新图像更可靠，而不是一起重新下载所有图像（并行），如下所示：

var refreshCount = 0;
function updateImages() {
  var nextImage = refreshCount % document.images.length;
  var image = document.images[nextImage];
  if(image.complete) {
    var newImage = new Image();
    newImage.src = image.src;           
    image.parentNode.insertBefore(newImage,image);
    image.parentNode.removeChild(image);
    refreshCount++;
  }
  setTimeout(updateImages, 1000);
}
// Wait 20 sec before starting the refreshes 
// (gives time to get the images downloaded in the first place)
setTimeout(updateImages, 20000);