Question

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

例如，如果数据库中有一些名为'foo'的东西，我有一个名为'img / foo.jpg'的项目

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

在大多数情况下，这可以按预期工作，但偶尔刷新（我查询数据库，清除所有div，每30秒重写一次节点），偶尔会有一些图像中断/不加载。它没有任何押韵或理由，有时它不会发生，有时也会发生几次。

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

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

Answer 1

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

Answer 2

道歉，如果这不是一个好的答案，但如果你的页面上有很多图像，可能是浏览器（并不限于IE6）没有下载所有这些数据。

如果您“清除所有div，并且每30秒重写一次节点”，则可能会遇到Microsoft支持问题“How do I configure Internet Explorer to download more than two files at one time?”所暗示的问题。您可能会注意到正在下载的图像。

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

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);

图片打破页面刷新？

2 个答案: