Avatar billede EveryMA Mester
09. november 2015 - 22:32 Der er 10 kommentarer

display: none

hej

jeg bruger display: none; til at skjule ting som man f.eks ikke behøver at se på mobilen, men udelukkende på desktop. det fungerer som det skal.

Men loader browseren indholdet som bliver skjult?

<div class="xxx">
hej hej
</div>

hvis xxx er sat til none på mobil, loader den så alligevel indholdet ? altså "hej hej" bare uden at vise det? for det gør jo at svartiden er ringere hvis den loader det selvom den ikke viser det.

der findes en milliard guides om brugen af displays, men jeg synes ikke at kunne finde nogen der fortæller om indholdet alligevel bliver loadet selvom det ikke vises..
Avatar billede erikjacobsen Ekspert
10. november 2015 - 00:34 #1
Ja da. Indholdet af en display:none div overføres til klienten/browseren, som derefter kan vælge at slå display til igen.

Skal du spare på overførte bytes, skal du fra serversiden sørge for at det ikke bliver sendt med.
Avatar billede EveryMA Mester
10. november 2015 - 07:36 #2
men hvad ville du gøre, hvis du havde noget du ville slå fra som ikke skal ses på en mobil? vi taler om responsivt design ikke separat mobil version.

display none er netop en dårlig funktion i den sammenhæng hvis den alligevel loader indholdet.
Avatar billede Slater Ekspert
10. november 2015 - 09:06 #3
Skal det være responsivt, så har du ikke andre muligheder. Hvis du vælger ikke at sende f.eks. en desktop-menu til klienten ved mobilstørrelser, så er det ikke længere en responsiv side, så er det to forskellige sider.

Men der er altså heller ikke noget negativt, performance-mæssigt, ved at sende det ekstra data. Det er jo kun HTML, som fylder forsvindende lidt, og browseren bruger ikke regnekraft på at rendere elementer der er display: none;

Det eneste problem er, at søgerobotter som Google læser display:none'et indhold, så den kan opfatte det som dobbeltindhold og give dig værre rating. Det betyder dog ikke noget for navigation, som det som regel er. Men hvis du kan bruge CSS til at lave et element om til mobiludgaven i stedet for at skjule det og vise et andet, er det bedre.
Avatar billede EveryMA Mester
10. november 2015 - 23:04 #4
det er rigtigt.

mit eksempel var også pivringe, nu jeg lige kigger igen.

jeg har 10 billeder på forsiden som primært trækker tænder i forhold til undersider og på mobilsiden har jeg kun behov for et af de billeder. men mobile enheder loader jo alligevel alle selvom de bare er sat til display none.

billederne er ikke en del af designet som sådan men blot billeder der trækkes ud af databasen..

hvad mener du med det sidste?

"Men hvis du kan bruge CSS til at lave et element om til mobiludgaven i stedet for at skjule det og vise et andet, er det bedre" ?

jeg vil ikke oplyse urls men jeg har altså stødt på en hjemmeside som har et responsivt design, men på en anden måde. urls på hele siden er altid det samme, men selve kildekoderne er tydeligvis lavet om. så om ser det på desktop/mobil er adressen den samme, men kildekoden er optimeret til enheden man kigger fra.

selve stien til mobil-css'en vises ikke på desktop versionens kildekode og omvendt.  hvordan kan det stå til ?
Avatar billede keysersoze Guru
10. november 2015 - 23:44 #5
device detection på serveren - så kan man servere markup og indhold efter behov.
Avatar billede rolchau Nybegynder
11. november 2015 - 13:14 #6
Du kan angive et srcset på dine image tags der angiver hvornår hvilke billeder skal loades. Så kan du angive et meget mindre billede eller måske endda et blankt billede på mindre devices.

Supporten er god: http://caniuse.com/#search=srcset

IE support - polyfill her: https://github.com/scottjehl/picturefill

Alternativt, ajax indhold ind udfra nogle js media queries.
Avatar billede EveryMA Mester
12. november 2015 - 16:12 #7
rolchau det fungerer ikke... eller det fungerer nok men ikke for mig. jeg har flere tusind billeder og dem kan jeg ikke sidde og redigere og gemme så der er lille mellem og stor :) De alle har en standard størrelse.

jeg glukker lige på device detection
Avatar billede keysersoze Guru
12. november 2015 - 17:19 #8
Hvis du arbejder med fx .NET eller PHP ville du kunne lave et komponent, der resizer dine billeder efter behov - og hvis du evt kigger på begrebet lazyloading vil du kunne scripte dig ud af kun at loade synlige billeder.
Avatar billede EveryMA Mester
02. februar 2016 - 23:02 #9
Fik aldrig lazyloading til at virke og arbejder hverken med .net eller php, men smid gerne svar keysersoze. du var til god hjælp !
Avatar billede keysersoze Guru
03. februar 2016 - 22:39 #10
svar
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester



IT-JOB