스타일 시트 이미지가 Firefox 또는 Safari에서 다시로드되지 않음

Question

Firefox (적어도 v3 이상)와 Safari가 CSS 파일에서 참조 된 이미지를 올바르게 캐시하지 못하는 것으로 나타났습니다. 이미지는 캐시되지만 서버에서 변경된 경우에도 새로 고쳐지지 않습니다. Firefox가 캐시에 이미지를 저장하면 이미지가 변경되었는지 결코 확인하지 않습니다.

우리의 CSS 파일은 다음과 같습니다

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

문제는 우리가 지금 newsitem_background.jpg 이미지를 변경하는 경우가 명시 적으로 페이지를 새로 고침하지 않는 한, 모든 파이어 폭스 사용자는 여전히 기존의 이미지를 얻을 것입니다. 반면에 IE는 이미지가 변경되었음을 감지하고 자동으로 다시로드합니다.

이 문제는 알려진 문제입니까? 해결 방법은 무엇입니까? 감사!

EDIT : 해결책은 F5를 누르지 않는 것입니다. 나는 이것을 할 수있다. 그러나 우리의 고객은 우리 웹 사이트를 방문하여 오래되고 오래된 그래픽을 얻을 것입니다. F5를 눌러야한다는 것을 어떻게 알 수 있습니까?

Firebug를 설치하고 이미 의심되는 것을 확인했습니다. Firefox는 CSS 파일에서 참조 된 이미지를 검색하여 변경되었는지 확인하지 않습니다. F5 키를 누르면 모든 이미지가 확인되고 웹 서버는 에이 변경된 경우를 제외하고 304로 응답합니다. 여기에서 200 OK로 응답합니다.

그래서 Firefox에 을 자동으로 묻는 방법이 있습니까? css 파일에서 참조되는 이미지를 자동으로 업데이트 하시겠습니까? 확실하게이 문제가있는 유일한 사람이 아니겠습니까?

EDIT2

: 나는 로컬 호스트로이 테스트 및 이미지 응답은 어떤 캐싱 정보를 포함하지 않는, 그건 :

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 : 내가 좀 더 읽기 짓을했는지 그것은 '그냥 할 수있는 것 같습니다 파이어 폭스 또는 대부분의 브라우저는 이미지가 자주 변경되지 않는다고 가정하기 때문에 (헤더와 모두 만료 됨) 고정되어 있습니다.

Answer 1

이미지 URL에 쿼리 문자열 값을 추가하기 만하면됩니다. 난 보통 그냥 "버전 번호"를 만들 때마다 이미지 변경을 증가 :

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

Answer 2

Shift 키를 누른 채로 다시로드 (또는 F5 키 누름)를 시도하십시오.

그렇지 않은 경우 Firebug와 같은 도구를 사용하여 HTTP 요청/응답 헤더를 확인하고 캐싱을 제어하는 ​​헤더 값을 관찰하십시오. 나는이 문제를 결코 눈치 채지 못했다. 아마도 귀하의 서버가 304 응답 (수정되지 않음)을 반환하고있을 것입니다.

Answer 3

나는 이것이 아마도 당신이 듣고 싶은 것이 아니라는 것을 안다. 그러나 Firefox가 표준을 따르고 있고 IE가 약간 이상하게 행동하고있다 (그리고 당신은 단지 그것에 의존한다고 생각한다.)).

캐싱 동작은 이미지와 함께 전송되는 캐싱 헤더에 따라 다릅니다. 헤더 (또는 이미지 중 하나에 대한 URL)를 게시 할 수있는 위치에 있다면, 우리는 무엇이 진행되고 있는지 구체적으로 말할 수 있습니다.

Answer 4

CSS 파일뿐만 아니라 서비스중인 이미지의 HTTP 헤더를 확인하십시오.

캐시에 설정되어 있거나 누락 된 파일이 있으면 브라우저가 해당 파일을 올바르게 캐싱하고있는 것입니다.

Answer 5

이러한 문제를 방지하기 위해 웹 마스터가 파일에 버전 번호를 추가하는 것을 보았습니다. 따라서 site-look-124.css 및 newsitem_background-7.jpg를로드합니다.

IMHO.

Answer 6

이 파이어 폭스는 이미지가 만료 된 경우 확인하지 않는 문제가 해결되지 않습니다,하지만 당신이 할 수있는 것은 당신의 클라이언트가 올바른 이미지가 볼 수 있도록 :

는 PHP에 CSS의 이미지를 설정 또는 이미지를 반환 비슷한 스크립트

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

그런 다음 무작위로 배경 IMAG을 반환하는 내 홈 서버에서 사용할 이미지 "

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

를 반환하는 스크립트를 사용을 일부 페이지는 e이고 Firefox는 캐시하지 않습니다. 원한다면 이미지로 펑키 한 스푸핑을 할 수도 있습니다.

Answer 7

또 다른 (이것은 주로 웹 디자인의 중간에 발생하는 경우) 실제 CSS 페이지를 표시하는 것입니다 빠른 주위 작업 파이어 폭스에서, 페이지를 새로 고침하면 웹 사이트로 돌아 가면 브라우저가 현재 CSS 페이지를 읽습니다. 이것이 바로 웹 디자이너