Imagens quebrando na página de atualização?

Question

Estou puxando dados de um banco de dados com Ajax e preencher dinamicamente uma tag div com elementos de imagem. Os corresponde nome do arquivo de imagem para os dados no banco de dados.

Por exemplo, se havia algo no banco de dados chamado 'foo', eu tenho um item chamado 'img / foo.jpg'

Meu javascript puxa os dados e cria uma imagem de um com o src se 'img / foo.jpg' define a classe e, em seguida, escreve-lo para o div correta.

Para a maior parte, isso funciona como pretendido, mas ocasionalmente em uma atualização (eu tenho que consultar o banco de dados, evitando todos os divs, e reescrevendo os nós a cada 30 segundos), ocasionalmente, algumas das imagens vai quebrar / não carregar. Não há nenhuma rima ou razão para qual deles é, às vezes acontece a nenhum, e às vezes a vários.

Se você clique direito -> imagem show, atualizar manualmente, ou esperar por ele para puxar os dados novamente, ele exibe a imagem como pretendido. Portanto, eu sei que os dados estão sendo puxados e escritas corretamente, e isso só parece estar falhando para carregar a imagem.

Alguém sabe por que ou como para resolver este problema?

Answer 1

Experimente no Firefox com o Firebug add-on, com o painel Net habilitado e você pode ser capaz de ver por que as buscas para as imagens estão falhando.

Answer 2

Desculpas se isso não é ser uma resposta boa, mas se você tiver muitas imagens em sua página, pode ser que o navegador (e isto não está limitado ao IE6) não tenha transferido os dados para todos eles.

Se você está "limpando todos os divs, e reescrevendo os nós a cada 30 segundos" que você pode correr para o problema sugerido pela pergunta de suporte da Microsoft " Como faço para configurar o Internet Explorer para baixar mais de dois arquivos de uma só vez? ". Pode ser que você observe as imagens a ser transferidos.

Em vez de imagens re-download de todas as imagens juntas (em paralelo), você pode encontrar a atualização em série a ser mais confiáveis ??assim:

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