GoldenLine
Zaloguj się
Dariusz Markiewicz

Dariusz Markiewicz programista, amigol

Temat: css a ładowanie grafiki tła

Witam

Ma do Was pytanie odnośnie css i ładowania grafiki jako tło
zdefiniowanej w poszczególnych klasach/id. CSS zewnętrzny,
zlinkowany w sekcji header.

Nie mogę dotrzeć do wiarygodnej informacji jak w samej istocie
działa css. Czy jeżeli klasa jest zdefiniowana w css np.

.mojaklasa{
background: url(moj_obraz.png);
}

to czy niezależnie od tego czy na danej podstronie jest referencja do
danej klasy czy nie, to obraz tła zostanie załadowany, czy wprost przeciwnie,
przeglądarka załaduje obraz tylko wtedy gdy w aktualnie wczytywanym
dokumencie html znajdzie się referencja do klasy?

Szukając w wielu źródłach, natrafiam na rozbieżne opinie. Może to zależy
od samej przeglądarki?

Skąd u mnie wątpliwość, testowałem moją stronę:
http://tools.pingdom.com/
http://test.watchscript.pl/

W obu testach widzę, że podczas wczytywania zawartości są ładowane nawet
niepotrzebne w danej chwili grafiki – na 100% sprawdzałem w samym źródle strony,
że w danym momencie nie mam referencji do danej klasy a pomimo tego,
obrazek tła z tej klasy jest wczytywany.

Być może wynika to z faktu, że źle rozumiem wyniki testu a być może faktycznie
są wczytywane wszystkie obrazy, które linkuje css.

Będę wdzięczny za wypowiedzi osób mających doświadczenie w tym zakresie.

Pozdrawiam
Darek
Link do wypowiedziLink

konto usunięte

Temat: css a ładowanie grafiki tła

Nie wiem co to za testery odpasione, ale kiepska by to była przeglądarka która ładowałaby każdy link jaki tylko jej się trafi z kodzie.

Odpowiedź brzmi - przeglądarka ładuje tylko to co musi wyświetlić.
Link do wypowiedziLink
Marcin Juchnicki

Marcin Juchnicki sklep.zagrajsam.pl

Temat: css a ładowanie grafiki tła

Odpowiedź brzmi - przeglądarka ładuje tylko to co musi wyświetlić.

To jest oficjalna wersja twórców przeglądarek czy tylko Twoja teoria?

Lepiej rozsądnie zaprojektować style niż liczyć na kaprys twórców przeglądarek. Tego działania nie ustalają standardy , a ładowanie wszystkich obrazków ma też swoje plusy. To że klasa chwilowo nie występuje nie zmienia niczego. Klasę można zmienić po wyświetleniu strony. Wtedy zazwyczaj oczekujemy często szybkiej reakcji a nie ładowania obrazka.
Link do wypowiedziLink
Adam Pawliczek

Adam Pawliczek Usability expert, UX
designer,
Interaction
specialist

Temat: css a ładowanie grafiki tła

1. To co się ładuje można w bardzo prosty sposób sprawdzić zarówno po stronie przeglądarki (firebug) jak i po stronie serwera w jego access logach... dziwię się że sam po prostu nie sprawdzisz.
2. Ładowanie niepotrzebnych w danym momencie rzeczy wydaje się głupie, ale jak pisze Marcin te elementy mogą być potrzebne później. A to że jest syf w css i przeglądarka ładuje jakieś niepotrzebne dane (obrazki) to już wina programisty, który ładuje elementy które nie będą nigdy używane.
Link do wypowiedziLink

konto usunięte

Temat: css a ładowanie grafiki tła

Ok, panowie, ale bądźmy poważni. Jeżeli dany styl przypisany jest pod selektor który nie pasuje do żadnych elementów to przeglądarka nie będzie ciągnąć żadnych obrazków z tego stylu.

To zachowanie bywa nawet nieporządane - np. kiedy przy jakiejś akcji dynamicznie taki element się pojawia i obrazek musi być widoczny (choćby jakieś obrazkowe, podświetlane :hover menu). Wtedy można kombinować np. tworząc elementy dynamicznie, za pomocą JS, ale nie pokazując ich, tak żeby przeglądarka zdążyła odpalić zapytanie i zacache'ować obrazek zanim jeszcze będzie potrzebny.
Link do wypowiedziLink

konto usunięte

Temat: css a ładowanie grafiki tła

Mikołaj Siedlarek:
Wtedy można kombinować np. tworząc elementy dynamicznie, za pomocą JS, ale nie pokazując ich, tak żeby przeglądarka zdążyła odpalić zapytanie i zacache'ować obrazek zanim jeszcze będzie potrzebny.
Eee tam, lepiej użyć sprite'ów - mniej requestów i nie trzeba JS.
Link do wypowiedziLink

konto usunięte

Temat: css a ładowanie grafiki tła

Tomasz K.:
Mikołaj Siedlarek:
Wtedy można kombinować np. tworząc elementy dynamicznie, za pomocą JS, ale nie pokazując ich, tak żeby przeglądarka zdążyła odpalić zapytanie i zacache'ować obrazek zanim jeszcze będzie potrzebny.
Eee tam, lepiej użyć sprite'ów - mniej requestów i nie trzeba JS.

Naturalnie, ale to nie jest tak oczywistym dowodem że przeglądarka nie robi głupot ;)
Link do wypowiedziLink
Łukasz C.

Łukasz C. Senior Technical
Architect

Temat: css a ładowanie grafiki tła

mysle ze nie zostalo to nigdzie z gory zalozone, przetestuj sam, wez przegladarke, i zrzuc log serwera do pliku, bedziesz mial odpowiedz :)

// edit:
imho gdybym robil przegladarke to po sparsowaniu css, najpierw sciagal bym te pliki ktore sa aktualnie potrzebne do zakonczenia wyswietlania elementow strony, a zaraz po tym reszte plikow zdefiniowanych w css, dlaczego?
dlatego, ze skoro cos zostalo zdefiniowane w css to istnieje prawdopodobienstwo ze moze byc uzyte na stronie, wiec moge to zapisac w cache wczesniej a gdy faktycznie bedzie potrzebne z tego skorzystac, skracajac jednoczesnie czas renderowania strony

ale najlepiej sprawdz sam jak dana przegladarka dziala :)Łukasz C. edytował(a) ten post dnia 22.07.11 o godzinie 22:55
Link do wypowiedziLink

konto usunięte

Temat: css a ładowanie grafiki tła

Większość przeglądarek tak robi - ściąga to co jest używane, a nie to co jest zdeklarowane.

Każdy przecież widział jak na stronie po najechaniu na guziczek doczytuje hovera - się znaczy - doczytuje nowe obrazki z deklaracji z CSS'a. (Pomijam tutaj sytuacje gdzie ktoś JS'em zmienia style/atrybuty).
Link do wypowiedziLink
Dariusz Markiewicz

Dariusz Markiewicz programista, amigol

Temat: css a ładowanie grafiki tła

1. To co się ładuje można w bardzo prosty sposób sprawdzić zarówno po stronie przeglądarki (firebug) jak i po stronie serwera w jego access logach... dziwię się że sam po prostu nie sprawdzisz.

Sprawdziłem na firebug wcześniej i wiem że u mnie na firefox się
nie ładują. To nie o to chodzi, jaki jest szczególny przypadek,
pytam się w ogólności, ponieważ zdziwił mnie trochę wynik testów
na stronach do testowania szybkości wczytywania, są to dwie niezależne
strony.

Jak napisałem powyżej, być może wynika to z mojego niezrozumienia
wyniku testu.
2. Ładowanie niepotrzebnych w danym momencie rzeczy wydaje się głupie, ale jak pisze Marcin te elementy mogą być potrzebne później. A to że jest syf w css i przeglądarka ładuje jakieś niepotrzebne dane (obrazki) to już wina programisty, który ładuje elementy które nie będą nigdy używane.

nie zaraz, co znaczy syf w css? Mam rozumieć, że tworzysz css dla
każdej podstrony? Nie do końca rozumiem co masz na myśli przez
bałagan w cssie?

W css mam clase:

.mojaklasa{
background-image: url(moje_tlo);
}

referencje np do tej klasy mam tylko na jednej podstronie,
natomiast na stronie głównej, którą testowałem nie ma referencji
do tej klasy.

ozdrawiam
Darek
Link do wypowiedziLink

konto usunięte

Temat: css a ładowanie grafiki tła

Nie sugerował bym się jakoś mocno testami...
Łatwiej przecież zrobić "test" który szuka zewnętrznych elementów w HTML i w CSS i wczytać wszystkie niż sprawdzać, które z klas CSS są w użyciu :D
Link do wypowiedziLink
Tomasz Krasoń

Tomasz Krasoń Programista php,
Centrum Systemów
Informatycznych Sp z
o.o.

Temat: css a ładowanie grafiki tła

Jak już ktoś wspomniał wyżej zrób 2 duże obrazki 1 aktywny, 1 na hover i zobaczysz jak się będzie doładowwać po najechaniu kursora.
Temat bez sensu moim zdaniem.
Link do wypowiedziLink
Dariusz Markiewicz

Dariusz Markiewicz programista, amigol

Temat: css a ładowanie grafiki tła

Tomasz Krasoń:
Jak już ktoś wspomniał wyżej zrób 2 duże obrazki 1 aktywny, 1 na hover i zobaczysz jak się będzie doładowwać po najechaniu kursora.
Temat bez sensu moim zdaniem.

Słuchajcie Panowie, ja wiem jak to u mnie działa, to nie o to chodzi.
Jak wspomniałem wyżej u mnie ładują się tylko wymagane obrazy.
Moje pytanie tyczy bardziej reguły/standardu, którego najwyraźniej
nie ma.

Pytanie o tyle ma sens, że jest to sklep internetowy, gdzie docelowi
klienci to nie grupa biznesowa a strzechy ludzki gdzie w wielu domach,
ludzie korzystają z internetu mobilnego, starych komputerów/przeglądarek.
Mam trochę grafiki więc o tyle jest to istotne. Między innymi dlatego
też bawię się w sprite, kompresje css czy js.
Może jest to dziwne, ale też wspieram IE6 w tym projekcie, nie netscape :-)
nie wspieram ;-).

Każdy projekt jest dedykowany i takie zabawy są bezcelowe przy założeniu,
że docelowy odbiorca, "przeglądacz" ma w miarę szybkie łącze, no może
z punktu widzenia sieci i czystości zawsze się powinno ograniczać ilość
zapytań.

Zależy mi na szybkości wczytywania strony, jednak nie chce wyważać
otwartych drzwi jeśli jest jakaś reguła odnośnie pierwotnego pytania.

Uprzejmie dziękuję za wszelkie odpowiedzi i pozdrawiam.
Darek
Link do wypowiedziLink

konto usunięte

Temat: css a ładowanie grafiki tła

Odpowiadajac krotko na twoje pytanie - Nie, obrazek nie zostanie wgrany.
Bo gdyby tak bylo, to nie musialbym dodawac JSowych pre-loaderow do swoich przyciskow na stronie :)
Link do wypowiedziLink

konto usunięte

Temat: css a ładowanie grafiki tła

Andrzej Winnicki:
Odpowiadajac krotko na twoje pytanie - Nie, obrazek nie zostanie wgrany.
Bo gdyby tak bylo, to nie musialbym dodawac JSowych pre-loaderow do swoich przyciskow na stronie :)
racja, obrazki nie są wczytywane
nie trzeba jednak dodawać jsowych preloaderów, bo można dodać cssowe ;p
http://perishablepress.com/press/2010/01/04/preload-im...

rozwinięcie tematu z pobieranie niewidocznych elementów (komentarze):
http://www.thecssninja.com/css/even-better-image-prelo...
Link do wypowiedziLink

konto usunięte

Temat: css a ładowanie grafiki tła

Kamil Brenk:
Bo gdyby tak bylo, to nie musialbym dodawac JSowych pre-loaderow do swoich przyciskow na stronie :)
racja, obrazki nie są wczytywane
nie trzeba jednak dodawać jsowych preloaderów, bo można dodać cssowe ;p

Tak, ale do tego co ja robilem - trzeba bylo dla ulatwienia zycia i bez potrzeby pamietania o uaktualnieniu CSSow ;) Wszystko robi JS w tle.
Ta opcja z CSSem jest tez fajna.
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Prosze o pomoc koderow //CSS




Wyślij zaproszenie do
Anuluj