페이지가 새로워지는 이미지?

Question

Ajax가있는 데이터베이스에서 데이터를 가져오고 이미지 요소로 DIV 태그를 동적으로 채우고 있습니다. 이미지 파일 이름은 데이터베이스의 데이터에 해당합니다.

예를 들어 'foo'라는 데이터베이스에 무언가가 있으면 'img/foo.jpg'라는 항목이 있습니다.

내 JavaScript는 데이터를 가져 와서 'img/foo.jpg'가 클래스를 설정 한 다음 올바른 div에 작성하면 SRC로 이미지를 만듭니다.

대부분의 경우, 이것은 의도 한대로 작동하지만 때로는 새로 고침에서 작동합니다 (데이터베이스를 쿼리하고 모든 DIV를 지우고 30 초마다 노드를 다시 작성해야 함), 때로는 일부 이미지가 부서 지거나로드되지 않습니다. 운율이나 그 이유는 무엇인지, 때로는 아무도 발생하지 않으며 때로는 여러 가지가 발생하지 않습니다.

마우스 오른쪽 버튼을 클릭하거나 이미지 표시, 수동으로 새로 고침 또는 데이터를 다시 가져 오기를 기다리면 의도 한대로 이미지가 표시됩니다. 따라서 데이터가 올바르게 가져오고 작성되고 있다는 것을 알고 있으며 이미지를로드하지 않는 것 같습니다.

이 문제를 해결하는 이유 또는 방법을 아는 사람이 있습니까?

Answer 1

넷 패널이 활성화 된 Firebug 애드온으로 Firefox에서 시도해 보면 이미지의 페치가 실패한 이유를 확인할 수 있습니다.

Answer 2

사과가 좋은 답변이 아닌 경우 사과하지만 페이지에 이미지가 많으면 브라우저 (IE6에 국한되지 않음)가 모든 데이터에 대한 데이터를 다운로드하지 않았을 수 있습니다.

"모든 div를 지우고 30 초마다 노드를 다시 작성하는 경우"Microsoft 지원 질문에 의해 암시 된 문제가 발생할 수 있습니다. "인터넷 익스플로러가 한 번에 두 파일 이상을 다운로드하도록 구성하려면 어떻게해야합니까?". 이미지가 다운로드되는 것을 알 수 있습니다.

모든 이미지를 함께로드하는 대신 (병렬로) 이미지 업데이트가 연속적으로 더 신뢰할 수 있음을 찾을 수 있습니다.

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