Come precaricare le immagini in modo che siano caricati più velocemente ovunque sulla pagina, ed è una buona pratica?

Question

Ecco la cosa: ho una mappa di Google con un sacco di marcatori in esso

.

Il problema è che i caricamenti di mappe, rimane vuoto per un po 'e solo allora vengono visualizzati i marcatori. I marcatori sono PNG personalizzati.

La mia idea è quella di "precarico" loro (non sono sicuro che sia la parola giusta) in modo da apparire quasi allo stesso tempo, come la mappa.

Quello che ho fatto finora è quello di aggiungere le stesse immagini che uso sulla mia mappa, al di fuori della mappa, in precedenza nella pagina in display:none;

Non sono sicuro, ma sembra che il tempo che intercorre tra la mappa e le immagini vengono visualizzate è stato ridotto.

E 'il modo migliore per farlo, ed è una buona pratica?

Answer 1

Si potrebbe utilizzare "sprite" vale a dire una raccolta di immagini separate il 1 ° singolo png. Questo porta il vantaggio di richiedere solo 1 carico cioè carichi meno separati. Google GWT spinge questa tecnica molto (vale a dire fasci di immagine).

Il valore di questa tecnica aumenta con il numero di immagini digitali che richiedono carico:. Le immagini più separati, più tempo occorre per caricarli

Answer 2

Non utilizzare display:none per il precaricamento. Perché un elemento impostato su display:none non rende qualsiasi dei suoi attributi fisici, il browser non si preoccupa di scaricare fino a quando è reso visibile.

Un'alternativa è quella di utilizzare visibility:hidden, ma si corre il rischio di imbattersi in un agente utente che fa più o meno la stessa cosa. visibility:hidden richiede che il browser calcolare il modello di riquadro per l'immagine, che richiede che l'immagine viene caricata (per ottenere le dimensioni). Io non credo che questo funziona in IE6, però.

L'ultima tecnica (e il mio preferito) è quello di creare un div direttamente prima il tag </body>. Posizionarlo assoluta con left: -99999999px; top: -99999999px. Il browser è costretto a rendere le immagini (e di conseguenza loro carico) e non c'è disordinato Javascript per affrontare.

Ora, per integrare questo con il vostro problema, inserire il codice per la mappa di Google dopo il tuo "precarico div". Il tuo browser sarà costretto a caricare le immagini prima di eseguire il codice per creare la mappa. Questo dovrebbe risolvere il problema.

Spero che questo aiuti!

Answer 3

Da quello che mi ricordo della maggior parte dei browser moderni, le immagini vengono sempre caricati una sola volta (dato lo src dell'immagine è lo stesso). Credo che si li intendi caricare prima il carico mappe.

A mio parere in realtà non importa più di tanto. Marcatori dovrebbero essere relativamente leggero rispetto all'immagine mappa stessa e non posso davvero utilizzarli senza la mappa in ogni caso.

Se si pensa che a migliorare l'esperienza degli utenti, allora penso che sia una buona pratica, ma mi piacerebbe provare a farli in un modo più pulito, più probabilmente una chiamata AJAX nelle prime fasi del caricamento della pagina?

Date un'occhiata a Ajax In Azione: Precaricamento Immagini