ritardare il caricamento di una certa immagine css sfondo

Question

in un CSS come questo:

... 
#big-menu { 
    background: #fff url(../images/big-menu.jpg) no-repeat; 
} 
#some-menu { 
    background: #fff url(../images/some-menu.jpg) no-repeat; 
} 
#some-other-menu { 
    background: #fff url(../images/some-other-menu.jpg) no-repeat; 
} 
... 

c'è un modo per ritardare il caricamento di immagini di sfondo #big-menu s' di, in modo che si carichi dopo tutto il resto, compresi tutti delle immagini nell'HTML e in ogni altro sfondo CSS (some-menu e some-other-menu).

Il motivo è, big-menu.jpg è di dimensioni molto pesanti e voglio che venga caricato per ultimo. Dopotutto, è solo un piacere per gli occhi, e ci sono altre immagini di sfondo che hanno un uso migliore di così. (come quelli utilizzati nei pulsanti)

L'ordine di inserirlo in CSS o le occorrenze del markup (#big-menu) in HTML ha qualcosa a che fare con ciò che viene caricato per primo? o c'è un modo più affidabile per controllarlo? javascript (jQuery preferito) va bene.

Answer 1

L'ordinamento in css non controlla quali risorse vengono caricate per prime, ma influisce su quale stile esistente viene sovrascritto o ereditato.

Prova l'evento onload JavaScript. L'evento viene eseguito solo dopo il caricamento della pagina.

function loadBG(){ 
    document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)"; 
} 
window.onload=loadBG(); 

Answer 2

Controllare quando caricare un'immagine in CSS non è realmente possibile. Potresti provare a metterlo in fondo al tuo StyleSheet ma dubito che vedrai un miglioramento.

Answer 3

Non penso che il posizionamento nel foglio di stile influirà su di esso, poiché l'ordine degli elementi a cui sono applicati deciderà quale immagine verrà caricata per prima.

Si potrebbe utilizzare jQuery per caricare le immagini nella giusta sequenza, anche se

$('firstElement').addClass('some-menu'); 
$('secondElement').addClass('some-other-menu'); 
$('lastElement').addClass('big-menu'); 

EDIT: Okay, allora forse invece di aggiungere una classe, una soluzione migliore sarebbe quella di aggiungere lo sfondo -immagini in fase di esecuzione.

$('firstElement').css("background-image", "some-menu.jpg"); 
$('secondElement').css("background-image", "some-other-menu.jpg"); 
$('lastElement').css("background-image", "big-menu.jpg"); 

Answer 4

questo potrebbe non essere una soluzione perfetta (in quanto è un css-sfondo e non un'immagine), ma YUI Image loader fornisce un buon modo di immagini pigro-caricamento.

Creare un gruppo

var imgGroup = new YAHOO.util.ImageLoader.group(window, 'load', 2); 

Dopo che il documento è stato caricato, l'immagine verrà caricata dopo 2 secondi. Vedi Yahoo! Shine o examples per demo.

Answer 5

Un'altra soluzione è dividere le risorse su domini diversi, i browser richiederanno solo due asset alla volta, quindi attenderne uno da caricare prima di avviare il successivo. È possibile osservare questo con Firebug e YSlow, quindi posizionare alcune risorse su images.example.com e images1.example.com e vedere se questo ha un impatto

Answer 6

L'ordine di download non può essere controllato utilizzando css. Tuttavia è possibile utilizzare javascript per raggiungere questo obiettivo.

Anche se non direttamente correlato alla domanda, forse prima di farlo dovresti optare per l'immagine usando smush.o il tuo programma di immagini preferito trovo che i jpeg siano molto buoni se salvati con una qualità dell'85%. Sperimenta e non dimenticare di impostare il tuo server web per memorizzare le immagini per lunghi periodi e quindi il problema sarà solo la prima volta che gli utenti visitano il sito.

Answer 7

Il trucco Javascript di Jason ha funzionato per me nella risoluzione di questo problema. Tuttavia, ho dovuto correggere leggermente la sintassi:

function loadBG(){ 
    document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)"; 
} 
window.onload=loadBG();