ページの更新時に画像が壊れますか？

Question

Ajaxを使用してデータベースからデータを取得し、divタグに画像要素を動的に入力しています。画像ファイル名はデータベース内のデータに対応しています。

たとえば、データベースに「foo」という名前があった場合、「img / foo.jpg」というアイテムがあります

「img / foo.jpg」がクラスを設定し、正しいdivに書き込む場合、私のJavaScriptはデータをプルし、srcでイメージを作成します。

ほとんどの場合、これは意図したとおりに機能しますが、時々更新すると（データベースにクエリを実行し、すべてのdivをクリアし、30秒ごとにノードを書き換えます）、時々画像の一部が壊れたり読み込まれなかったりします。それが韻を踏む理由や理由はありません。時には、何も起こらないこともあれば、時には起こることもあります。

右クリックすると-＆gt;画像を表示するか、手動で更新するか、データが再びプルされるのを待つと、意図したとおりに画像が表示されます。したがって、データが適切にプルおよび書き込まれていることがわかり、画像の読み込みに失敗しているようです。

この問題に対処する理由または方法を知っている人はいますか？

Answer 1

FireパネルでFirebugアドオンを有効にして試してみてください。Netパネルを有効にすると、画像の取得が失敗する理由を確認できる場合があります。

Answer 2

これが適切な答えではない場合は申し訳ありませんが、ページに多くの画像がある場合、ブラウザ（およびIE6に限定されない）がそれらすべてのデータをダウンロードしていない可能性があります。

「すべてのdivをクリアし、30秒ごとにノードを書き換える」場合Microsoftのサポートに関する質問＆quot; で示唆されている問題に遭遇する可能性があります。一度に2つのファイルですか？＆quot;。画像がダウンロードされていることに気づくかもしれません。

すべての画像を一度に（並行して）再ダウンロードする代わりに、次のように画像を連続的に更新する方が信頼性が高い場合があります。

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