Come precaricare le immagini con PhoneGap?

Question

Sono arrivato a credere che ci siano due cose che accadono. In primo luogo, se si vuole precaricare un URL, si può fare questo:

body:after{ 
    content: url(http://www.example.com/img/img_1.png) display:none; 
} 

Ma per quanto ne so, questo non aiuta in questo caso:

body:after{ 
    content: url(../img/img_1.png) display:none; 
} 

In quest'ultimo caso, l'immagine è già locale, quindi non è necessario "scaricarla"? È vero? O il primo bit di codice memorizzerà ancora di più l'immagine?

Chiedo, perché anche se lo faccio, e quindi passaggio a un'altra pagina, utilizzando jquery mobile, la pagina successiva richiede ancora alcuni secondi per caricare l'immagine di sfondo. Anche se è una risorsa locale.

Come aggirare questo?

Answer 1

Dalle prove che ho fatto, sembra che due cose possono causare un ritardo durante il caricamento di un'immagine:

1. Quando l'immagine deve essere caricato da un URL o
2. Quando l'immagine è localmente localizzato, ma deve essere posizionato sullo schermo

Quello che non ho realizzato è che con PhoneGap, anche con le immagini locali, potrebbe richiedere un po 'di tempo per caricare. Questo è ciò che mi ha causato problemi. Bene, questo e il fatto che stavo caricando da URL. Quindi, nel mio caso ho usato il "CSS3 Caching Plugin" in questo modo:

jQuery(function($) { 
    $.preload.images(document) 
}); 

Questo risolto il mio problema di caricamento delle immagini che era nel file CSS. Ma poi, per mia comodità, ho aggiunto una sezione al file css per i file memorizzati nella cache locale. In questo modo:

#cacheMe1 { background: #ffffff url('../img/img1.png') 50% 50% repeat-x; } 
#cacheMe2 { background: #ffffff url('../img/img2.png') 50% 50% repeat-x; } 
#cacheMe3 { background: #ffffff url('../img/img3.png') 50% 50% repeat-x; } 
#cacheMe4 { background: #ffffff url('../img/img4.png') 50% 50% repeat-x; } 
etc 

Questo caching risolto per la maggior parte delle immagini, più esso mi ha permesso di tenere ancora gli URL come carico in app (ho una sezione galleria dove la sua attualmente accettabile per vedere il carico di immagini, piuttosto che in mostra).

Quello che ho fatto anche che sembra funzionare, è che io uso il plugin "InAppBrowser" per precaricare intere pagine con l'apertura in una finestra nascosta:

var ref = window.open('http://www.example.com', '_blank', 'hidden=yes'); 

Se si apre un gruppo di file su carico delle app, sembra che quando uno apre nuovamente questi URL, o passare alla finestra con:

ref.show(); 

Quindi ci sono due modi decenti che ho trovato per i file di cache che funziona perfettamente per il mio scenario. Spero che aiuti qualcun altro!

Answer 2

Non so se ho capito bene, ma forse posso utile per voi:

<img src="my.png" onerror="this.src = 'image-not-found.png';" /> 

Answer 3

Quando stavo affrontando problemi con le immagini precarico ho dovuto abbandonare l'idea di utilizzare display:none; perche 'non ha fatto funziona correttamente (a condizione che il browser si rifiuti di caricare il contenuto di elementi invisibili per accelerare il caricamento della pagina e ridurre il traffico). Invece ho creato un div che a parere del browser era visibile, ma aveva zero width e height. Immagini richieste Carico come background-image per questo blocco. L'intero trucco è che la proprietà background-image può assumere più valori. Il codice CSS sarà il seguente:

#preload { 
    height: 0; 
    width: 0; 
    background-image: url(image-1.png), url(image-2.png); 
} 

Quindi non si ha confusione con il markup. Spero che questo trucco funzioni nel tuo caso.

Answer 4

Non è necessario allegare direttamente l'immagine al DOM, quindi non è necessario utilizzare css per nasconderlo. Usa JavaScript per precaricare le immagini.

var image = new Image(); 
image.src = "yourfile.jpg" 

si può quindi fornire una soluzione a lungo termine utilizzando appcache.