Imagens de folha de estilo não são recarregadas pelo Firefox ou Safari

Question

Nós descobrimos que o Firefox (pelo menos v3) e Safari não corretamente imagens de cache referenciado a partir de um arquivo css. As imagens são armazenadas em cache, mas eles nunca são atualizados, mesmo se você alterá-las no servidor. Uma vez que o Firefox tem a imagem no cache, ele nunca vai verificar se ele mudou.

Nossos olhares de arquivo css como este:

div#news {
  background: #FFFFFF url(images/newsitem_background.jpg) no-repeat;
  ...
}

O problema é que, se agora mudar a imagem newsitem_background.jpg, todos os usuários do Firefox ainda vai ter a imagem antiga, a menos que eles atualizar explicitamente a página. IE, por outro lado, detecta que a imagem mudou e recarrega-lo automaticamente.

Este é um problema conhecido? Quaisquer soluções alternativas? Obrigado!

EDIT: A solução não é pressionar F5. Eu posso fazer isso. Mas os nossos clientes só vai visitar o nosso site, e obter os velhos, gráficos ultrapassada. Como é que eles sabem que seria necessário pressionar F5?

Eu instalei o Firebug e confirmou o que eu já suspeitava: Firefox só não adianta tentar recuperar imagens referenciadas a partir de um arquivo css, para descobrir se eles foram alterados. Quando você pressiona F5, ele faz verifique todas as imagens, eo servidor web bem responde com 304, exceto para aqueles que Have mudado, onde ele responde com 200 OK.

Assim, há uma maneira de incitar o Firefox para automaticamente atualizar uma imagem que é referenciado a partir de um arquivo css? Certamente eu não sou o único com este problema?

EDIT2: Eu testei este com localhost, ea resposta de imagem não contém qualquer informação caching, é:

Server  Microsoft-IIS/5.1
X-Powered-By    ASP.NET
Date    Tue, 14 Oct 2008 11:01:27 GMT
Content-Type    image/jpeg
Accept-Ranges   bytes
Last-Modified   Tue, 14 Oct 2008 11:00:43 GMT
Etag    "7ab3aa1aec2dc91:9f4"
Content-Length  61196

EDIT3: Eu fiz um pouco mais de leitura e parece que ele simplesmente não pode ser corrigido, uma vez que o Firefox, ou a maioria navegador, vai apenas assumir uma imagem não muda muito frequentemente (expira cabeçalho e todos) <. / p>

Answer 1

Gostaria apenas de acrescentar um valor querystring para o url da imagem. Eu normalmente apenas criar um "número da versão" e incrementá-lo cada vez que a imagem muda:

div#news {
  background: url(images/newsitem_background.jpg?v=00001) no-repeat;
  ...
}

Answer 2

Para evitar tal problema, eu vi webmasters adicionar o número de versão para seus arquivos. Então eles carregam site-look-124.css e newsitem_background-7.jpg.

Não é um má solução, IMHO.

Answer 3

Verifique se o seu cabeçalhos HTTP nas imagens que você está servindo-se, bem como o arquivo CSS (s).

Se algum deles está definido para cache (ou estão em falta), encontra-se o navegador está corretamente cache o arquivo (s).

Answer 4

Eu sei que isso provavelmente não é o que você quer ouvir, mas é consideravelmente mais provável que o Firefox está seguindo o padrão e IE está fazendo algo um pouco estranho (e você só acontecerá a contar com ele;)).

O comportamento de cache depende do que cabeçalhos de cache estão sendo enviados com suas imagens. Se você estiver em uma posição para deixar os cabeçalhos (ou um URL para uma das imagens), então nós vamos ser capazes de lhe dizer mais especificamente o que está acontecendo.

Answer 5

Isso não vai resolver o problema do Firefox não verificar se a imagem expirou, mas o que você pode fazer para garantir que seus clientes ver a imagem correta é:

Definir a imagem no css a um script PHP ou similar que retorna a imagem:

div#news {
  background: #FFFFFF url(images/background.php?name=newsitem) no-repeat;
  ...
}

Em seguida, use o script para retornar a imagem "

<?php
$name = isset($_REQUEST['name']) ? $_REQUEST['name'] : false;
switch($name) {
    case 'newsitem':
        $filename = 'news_item_background.jpg';
    break;
    default:
        $filename = 'common_background.jpg';
    break;
}

header("Content-Type: image/jpeg");
header("Content-Transfer-Encoding: binary");
$fp = fopen($filename , "r");
if ($fp) fpassthru($fp);

Eu usá-lo em meu servidor de casa para retornar uma imagem de fundo aleatoriamente para algumas das minhas páginas, e Firefox não parece para armazenar em cache estes. Você também pode fazer alguma stuph funky com as imagens se você gosta.

Answer 6

Uma outra rápida solução alternativa (se isso ocorrer, principalmente no meio de web design) é para visualizar a página css real no firefox, e recarregar a página, então, quando você retornar ao site do navegador irá ler o css atual página.

é claro que isso é uma correção temporária apenas para a web designer

Answer 7

Tente segurar a tecla SHIFT enquanto clica em recarga (ou pressione F5 ).

De outro modo, utilizar uma ferramenta tal como o Firebug para verificar se o pedido HTTP cabeçalhos / resposta e observar os valores de cabeçalho que o cache de controlo. Eu nunca notei esse problema. Talvez o seu servidor está retornando uma resposta 304 (não modificado).