Mobilt innhold, hva blir lastet

[Thor Erik Just Olsen]

Hei folkens.
Jeg har et nettsted som jeg endelig har tatt meg tid til å starte å gjøre mobilvennlig.
Mitt spørsmål er: Er det mulig å få det til slik at kun innholdet som skal brukes som vises?

Jeg har brukt display:none i css for å få til det utseendet jeg ønsker, men har samtidig forstått at alt blir lastet, også det som er display:none. Noe som medfører at mobilbrukere jo laster ned alt som er ment for desktopbrukere i tillegg til sitt eget innhold.

Tips til hvordan jeg kan fikse det?

 

[barentshavet]

Det er vel mange metoder man kan gjøre dette på, men så vidt jeg vet ikke mulig i CSS.

For eksempel kan du lage et script som fjerner visse elementer i output når scriptet forstår at brukeren er på mobil.

<?php if($on_mobile == 'true')
{
}
?>

Du kan gjennomføre noe slikt gjennom Ajax og/eller JavaScript.

Det er også noe som heter "condentional loading", som du kan lese litt på.

Ellers har jeg ikke noe konkret svar, annet enn å ha gitt noen hint

 

[adeneo]

Dette kommer jo litt an på, bilder som inkluderes i HTML direkte, for eksempel i en <img> tagg, men som er satt til display:none vil normalt fremdeles lastes inn.

Derimot, bilder som er satt som background-image på en div, span eller lignende som er satt til display:none vil ikke lastes inn.

De to vanligste måtene å løse dette på er altså enten å bruke background-image sammen med display:none, eller å sette inn bildene med javascript i HTML'en når de skal vises, og merk at dette ikke er det samme som å fjerne bildene fra HTML'en når de ikke skal vises, ettersom det som regel da er for sent og bildene uansett vil bli lastet inn.

Det tredje alternativet er egne mobilsider.

Nå dag er nok responsive sider med media queries og diverse CSS teknikker for å optimalisere lasting på mobil det mest vanlig.

 

[xdex]

background-image til display:none kan lastes, av enkelte nettlesere. Men sånn er denne industrien, og alternativet er at det alltid lastes av alle. Vil anbefale deg å lese litt gjennom denne, http://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading som også inkluderer link til testing som er gjort vedrørende bilder.

 

[adeneo]

Ser ut som nyere versjoner av Blink og muligens IE laster bildene uansett om det er background-image og satt til display:none, så da er vel det eneste reelle alternativet media queries eller javascript.