스타일 시트가 이미지지 않은 다시 로드해 Firefox or Safari

StackOverflow https://stackoverflow.com/questions/200470

  •  03-07-2019
  •  | 
  •  

문제

우리가 발견했는 Firefox(적어도 v3)고 사파리지 제대로 캐시미지에서 참조하 css 파일입니다.이미지 캐시되지만,그들은 절대 새로 고침을 변경하는 경우에도,그들이 서버에 있습니다.파이어 폭스는 이미지가 캐시에,그것은을 확인하지 않는 경우는 변경되었습니다.

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

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

문제는 우리가 이제 변경 newsitem_background.jpg 이미지 모든 Firefox 사용자는 여전히 오래된 이미지지 않는 한 그들이 명시적으로 페이지를 새로 고칩니다.즉 다른 한편으로 검색하는 이미지가 변경되었고 다시 로드 그것은 자동으로 합니다.

이것이 알려진 문제입니까?어떤 방법?감사합니다!

편집:이 솔루션은 없을 F5 키를 누릅니다.내가 이것을 할 수 있습니다.그러나 우리의 클라이언트는 것이 우리의 웹 사이트를 방문하고,예전,오래된 그래픽입니다.어떻게 그들은 알고 있는 것이 필요하 F5?

내가 설치된 방화 및 확인 무 의심:파이어 폭스지 않도 검색하는 이미지에서 참조하 css 파일을 찾으면 그들이 변경되었습니다.F5 키를 누를 때,그것은 확인 모든 이미지,그리고 웹 서버에게 응답을 가진 304 를 제외하고,그 사람들 가 변경되는 곳에,그것은 응답이 200OK.

그래서,방법이 있을 촉구 Firefox 자동으로 업데이트를 참조하는 이미지에서 css 로 파일입니까?반드시 내가 하나만으로 이 문제가?

EDIT2:이 localhost,그리고 이미지 응답이 포함되어 있지 않는 모든 캐싱한 정보를,그것은:

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:나는 몇 가지 더 읽기와 그것은 그냥 된 해결할 수 없기 때문 Firefox,또는 대부분의 브라우저는 것,다만 추측하는 이미지지 않는 매우 자주 변경(expires 헤더와 모든).

도움이 되었습니까?

해결책

이미지 URL에 쿼리 스트링 값을 추가하겠습니다. 나는 보통 "버전 번호"를 만들고 이미지가 변경 될 때마다 증가합니다.

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

다른 팁

그러한 문제를 피하기 위해 웹 마스터가 추가하는 것을 보았습니다. 버전 번호 그들의 파일에. 그래서 그들은로드합니다 site-look-124.css 그리고 newsitem_background-7.jpg.

나쁜 해결책이 아닙니다, IMHO.

서빙중인 이미지와 CSS 파일의 HTTP 헤더를 확인하십시오.

그 중 하나라도 캐시로 설정되거나 누락 된 경우 브라우저가 파일을 올바르게 캐시하고 있습니다.

나는 이것이 아마도 당신이 듣고 싶은 것이 아니라는 것을 알고 있지만, Firefox가 표준을 따르고 있으며 즉, IE는 약간 이상한 일을하고있을 가능성이 훨씬 높습니다 (그리고 당신은 그것에 의존하는 것입니다)).

캐싱 동작은 이미지와 함께 캐싱 헤더가 전송되는 것에 따라 다릅니다. 헤더 (또는 이미지 중 하나에 URL을 게시 할 수있는 위치에 있다면, 우리는 더 구체적으로 무슨 일이 일어나고 있는지 알려줄 수 있습니다.

이것은 이미지가 만료되었는지 확인하지 않는 Firefox 문제를 해결하지는 않지만 고객이 올바른 이미지를 보도록하기 위해 수행 할 수있는 작업은 다음과 같습니다.

CSS의 이미지를 PHP 또는 이미지를 반환하는 비슷한 스크립트로 설정하십시오.

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

그런 다음 스크립트를 사용하여 이미지를 반환합니다. "

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

내 홈 서버에서 일부 페이지의 배경 이미지를 무작위로 반환하기 위해이를 사용하며 Firefox는이를 캐시하지 않는 것 같습니다. 원하는 경우 이미지로 펑키 한 stuph를 할 수 있습니다.

또 다른 빠른 작업 어라운드 (주로 웹 디자인 중간에서 발생하는 경우)는 Firefox의 실제 CSS 페이지를보고 페이지를 다시로드하는 것입니다. 웹 사이트로 돌아 오면 브라우저가 현재 CSS 페이지를 읽습니다.

물론 이것은 웹 디자이너를위한 온도 수정입니다.

Try SHIFT 키를 클릭하면 새로고침(또는 눌러 F5).

그렇지 않으면,같은 도구를 사용하여 방화를 확인하는 HTTP 요청/응답 헤더가 및 관찰하는 헤더를 제어하는 값을 캐시합니다.나는 것이 문제입니다.아마도 서버에서 반환하는 304 응답(수정되지 않음).

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top