2009-09-09 17 views
10

.Button { background: url (../ Images/button.png); }Wymuś przeglądarkę, aby ponownie odczytać obrazy w pamięci podręcznej.

Problem: ze względu na wydajność cała zawartość statyczna ma nagłówki wygasania ważności i jest buforowana przez przeglądarkę. Podczas zmiany obrazu użytkownik musi odświeżyć pamięć podręczną (Ctrl + F5 w IE). Chcę, aby obrazy były buforowane, ale w razie potrzeby muszą być automatycznie ponownie załadowane.

Pytanie: czy następne podejście jest "ważne"?

.button { 
    background: url(../Images/button.png?v=1234); 
} 

gdzie v = 1234 jest wersją mojej strony. Nie wiem, czy jest w 100% poprawne pisanie takich rzeczy w CSS i chcę, aby przeglądarki nadal buforowały obrazy, jeśli ich wersja jest taka sama. Czy wszystkie nowoczesne przeglądarki poprawnie buforują dane za pomocą parametrów URL?

Dzięki.

+0

Uważam, że nie działa na każdej przeglądarce. Niektórzy ignorują querystring. Być może mógłbyś dodać wersję w nazwie obrazu. Istnieją ramy, które pomagają to zrobić, więc nie trzeba mieć przycisku: button_v1.png, button_v2.png, itp. –

+0

Dobra wiadomość dla mojej strony - nie wymaga to poprawnego działania w 100% w IE6. Jeśli "? 1234" jest poprawnym rozwiązaniem dla IE7-8, Firefox 3+, najnowszej wersji Chrome, Opery i Safari, to rozwiązanie to jest odpowiednie dla mnie. – Roman

Odpowiedz

8

To wygląda na dobre podejście do mnie, będzie dobrze działać w CSS w nowoczesnych przeglądarkach - przeglądarka będzie szukać adresu obrazu (w tym ?v=1234), zobacz, że nie jest buforowana i wyślij nowy żądanie.

+3

Jaki jest powód głosowania w dół? – rahul

+0

To nie do końca prawda. IE jest najbardziej aneying, będąc faktycznie w stanie zignorować hashed linki i nagłówki kontroli pamięci podręcznej .. Altought to jest "najlepsze" podejście .. – yoda

+1

może to być związane z komentarzem na oryginalne pytanie " Wierzę, że to nie działa w przypadku każdej przeglądarki ", wydaje się być prawidłowym podejściem, jeśli wystarczająca liczba przeglądarek go obsługuje. –

0

Jest to omówione w przepisie 3 z High Performance Web Sites: "Dodaj wygasanie lub nagłówek kontroli pamięci podręcznej". Jednym z zalecanych podejść jest wersja plików, a nie strona.

Z accompanying blog:

Pamiętaj, że w przypadku korzystania z dalekiej przyszłości Wygasa nagłówka trzeba zmienić nazwę pliku komponentu każdej zmianie elementów. Na Yahoo! często robimy ten krok częścią procesu budowania: numer wersji jest osadzony w nazwie pliku komponentu, na przykład yahoo_2.0.6.js.

+0

Robię takie nazywanie wersji pliku (np. yahoo_2.0.6.js) z plikami JavaScript i CSS, ale dla mnie trudniej jest zmienić nazwę wszystkich zdjęć, które zostały zmienione, dlatego Potrzebuję jakiegoś podejścia, które nie wymaga zmiany nazwy pliku obrazu. Jest jeszcze jedna wada z podejściem "? 1234" - nowa wersja witryny unieważnia wszystkie obrazy, nawet niezmodyfikowane, ale przynajmniej jest to mniej bolesne w utrzymaniu. – Roman

Powiązane problemy