Ho una galleria nel mio sito web. La galleria contiene 15 immagini, ciascuna di circa 500 KB (la dimensione totale è di 7,5 MB).Caricamento GIF (Preloader) si blocca solo su Chrome
Poiché la galleria richiede un po 'di tempo per caricare (25 secondi sul mio computer, dura dipende dalla connessione), voglio che il visitatore sappia che la galleria sta caricando, da cui il Ajax loading GIF.
Desidero che il visitatore visualizzi la GIF di caricamento non appena entra nella pagina della galleria, finché le immagini della galleria non sono state scaricate e sono pronte per essere visualizzate.
Al fine di raggiungere il mio obiettivo, questo è quello che ho fatto:
Questo è l'inizio del corpo della pagina HTML galleria:
<body>
<img src="images/ajax-loader.gif" alt="" class="hiddenPic" />
<!-- loading Ajax loading GIF before all the other images -->
E questa è la parte CSS della galleria:
#gallery {
background: url(images/ajax-loader.gif);
background-repeat:no-repeat;
background-attachment: fixed;
background-position: center;
Quindi, in pratica, la GIF di caricamento deve essere scaricata non appena un visitatore accede alla pagina della galleria, poiché è il primo oggetto all'interno dello <body> che verrà scaricato. Tuttavia, non è visibile a causa della classe hiddenPic.
Questo metodo dovrebbe aiutare a rendere il GIF di caricamento pronto e visibile come sfondo della galleria il prima possibile, fino a quando tutte le immagini della galleria sono state scaricate e la galleria è pronta.
Tuttavia, il GIF di carico non funziona correttamente su Google Chrome; funziona perfettamente su Firefox & IE (girando perfettamente) - ma rimane bloccato (non gira correttamente) su Chrome, dal momento in cui appare fino a quando la galleria è pronta.
Aggiornamento: so di poter implementare una galleria migliore (come quelli proposti nei commenti) che richiederebbe meno risorse da parte dell'utente quando si entra in pagina della galleria -, ma non capisco come ciò possa essere la causa del problema quando il caricatore GIF funziona perfettamente su Firefox & IE.
Perché l'Ajax che carica GIF non funziona correttamente su Chrome?
Caricamento del sito Web sembra funzionare come previsto, anche in Chrome (v21.0.1180.77 m). Certamente quando carico la pagina mi viene presentato lo spinner GIF, che in seguito verrà sostituito dalla galleria. Direi che è piuttosto lento, cioè. Non vedo lo spinner "girare" lo vedo solo in 3 o 4 posizioni diverse, ma presumibilmente è il momento di caricare il resto della galleria e il mio PC è un po 'lento. Tuttavia, sto caricando la galleria in circa 5-6 secondi, non i 25 secondi che suggerisci in modo che possano influenzare i risultati. – Chris
Inoltre, mentre penso che dovresti assolutamente avere uno spin GIF, mi chiedo se dovresti caricare subito l'intera galleria, per due motivi: 1) rallenta l'intera pagina e 2) spreca larghezza di banda perché le persone potrebbero non vedere tutto le immagini. Vorrei esplorare un processo di 1) caricando ogni immagine quando è selezionata (quindi gif spinner per ogni immagine) o 2) caricare dire il primo 3. Quindi quando colpiscono 'Next Image' (per mostrare l'immagine 2) caricare l'immagine 4. Non vedranno alcuna differenza ma lo renderanno molto più veloce ed efficiente. – Chris
Quindi il motivo per cui lo spinner è bloccato perché caricare le immagini della galleria richiede la maggior parte delle risorse? Voglio far girare il caricatore - la GIF non è così pesante, quindi non vedo perché rimane bloccata e non riesco a farla girare correttamente, anche (beh, solo) quando le immagini vengono scaricate sul computer. A proposito del tuo suggerimento, sembra un ottimo modo per abbreviare i tempi di attesa e farlo funzionare velocemente. Non sono sicuro di quale sia il modo migliore, ma se userò no'1 devo aggiungere miniature alla mia galleria. – amiregelz