utilizzare senza soluzione di continuità di grandi immagini di sfondo su pagine web

Question

Voglio avere enormi immagini di sfondo sul mio sito, ma senza dare all'utente un momento difficile il download di loro e il sito alla ricerca brutto come sfondo carichi.

Sarebbero non più grande di 1920 x 1080 in termini di dimensioni, ma è difficile da dire in termini di kilobyte / megabyte.

Quali sono le opzioni qui e che sono più efficaci?

Non sono troppo preoccupato di larghezza di banda, voglio solo all'utente di pensare tutto è bello;)

Answer 1

Una possibilità è quella di utilizzare più sfondi. Avere piccola background come strato inferiore e coprire con sfondo grande.

Potrebbe essere difficile da avere due ambiti se si vuole che il corpo e vogliamo sostenere IE. Soluzione potrebbe essere quella di iniziare minore uso di fondo del corpo JS di cambiare sfondo a bassa risoluzione per alto-ricerca una volta caricata:

var i = new Image();
i.onload = function(){document.body.style.backgroundImage = 'url(' + i.src + ')';}
i.src = 'gigantic.jpg';

---

Tieni presente che tale sfondo di grandi dimensioni ha bisogno di più RAM rispetto alcuni browser mobili hanno (iPhone pre-3GS sarà o rifiutare di decodificare tale immagine a tutti o avrà inizio lo spurgo della cache / contenuto scheda in preda al panico).

Il secondo problema può essere aggirato con CSS Media Queries:

http://lofotenmoose.info/css/destroy/media- query-background-stretch /

Ad eccezione di query max-device-width invece di (zoom / virtuale) max-width.