Cześć, tworzę prosty szablon reaktywny pod smartfony i tablety. Dla urządzeń o rozdzielczości większej niż 760px na stronie pokazuje się dodatkowa kolumna. Poniżej tej szerokości lewa kolumna rozciąga się do 100% a prawa znika przy użyciu display:none w css.
Mam takie pytanie, może głupie - czy na urządzeniach gdzie strona ładuje się bez prawej kolumny mimo to, że jest ona niewidoczna w czasie wczytywania strony pobierana jest jej zawartość, czy nie ?
Pytam bo nie wiem i nie widzę odpowiedzi w sieci, a nie chciałbym obciążać użytkowników smartfonów czymś czego nie widzą ;)
sunpietro
26-08-2014, 20:28
Z tego co mi wiadomo, elementy z ustawionym display: none nie są wczytywane przez przeglądarki. Można to zweryfikować za pomocą Mozilla Developer Tools i poprzez włączenie widoku responsywnego w przeglądarce Mozilla Firefox.
===== EDIT
Właśnie sprawdziłem. Obrazki umieszczone w tagu:
<img/> są pobierane. Lecz jeśli ustawisz obrazek jako tło za pomocą CSS:
background: url(); to wtedy dla elementu z:
display: none; obrazki tła nie będą pobierane.
kuba098
26-08-2014, 21:08
Hmm, umnie sytuacja jest nieco bardziej rozbudowana niż ta, którą opisujesz bo ja ukrywam całą kolumnę, w której znajduję się dość sporo zapytań do bazy danych, obrazków, htmla itp.
Chodzi mi o to dokładnie
<style>
.right {display: none; }
</style>
<div class="right">
<--ZAWARTOŚĆ-->
</div>
Czy przy takiej budowie zawartość bloku o klasie right będzie się pobierać ?
sunpietro
26-08-2014, 23:29
Oczywiście, że zapytania do bazy danych będą wykonane. Jeśli te zapytania zwracają obrazki w postaci tagów HTML to te obrazki zostaną pobrane.
Blokada pobierania elementów za pomocą
display: none; działa tylko w części frontendowej i to tylko jeśli obrazki zostały użyte w arkuszach stylów. Dane będą pobierane standardowo.
Podsumowując; tak, zawartość bloku z klasą .right będzie pobrana.
kuba098
27-08-2014, 10:38
Hmm, z jednej strony to nie dobrze, a z drugiej bardzo dobrze bo np użytkownicy tabletów, którzy w pionowej orientacji nie widzą kolumny, po przekręceniu tabletu musieli by czekać na doładowanie się kolumny, co nie wyglądało by fajnie.
Hmm no trudno. A macie jakieś sposoby, przydatne skrypty w jQuery, które przyśpieszą działanie strony, poza standardowymi zasadami optymalizacji, wykorzystaniem CSS Sprite itp... ?
Ponieważ na stronie jest sporo obrazków, zainstalowałem skrypt Lazy Load, który blokuje ładowanie grafik dopóki nie są widoczne. (Dołożę to też do grafik w prawej kolumnie, co może rozwiąże po części problem problem bo powinno to blokować obrazy dopóki będzie ustawione display: none).
Coś byście jeszcze polecili ?
P.S Jeśli zawartość kolumny będzie w znaczny sposób ingerować w czas ładowania strony może zdecyduje się na dodatkowy szablon z zastosowaniem nagłówków HTTP Vary. Wyjdzie w praniu ;)