Ho una galleria di foto che mi piacerebbe poter visualizzare sui dispositivi mobili senza che i browser si blocchino o causino lo scorrimento a scatti. Carichi di plugin in giro per scaricare le immagini pigre ma c'è qualcosa là fuori per scaricare le immagini quando non sono in vista per risparmiare memoria?Come scaricare l'immagine quando non è 'in vista' per risparmiare memoria?
Non credo che ci sia un modo per farlo. JavaScript contiene solo riferimenti a oggetti DOM, che a loro volta sono gestiti dal browser. Quindi è interamente compito del motore della cache del browser determinare quando una risorsa viene deallocata. E queste decisioni non sono basate sul fatto che esista o meno un riferimento JavaScript a questo oggetto, ma piuttosto se la pagina per cui la risorsa è stata caricata è ancora attiva. In ogni caso, il browser esegue automaticamente la gestione della cache e non è possibile influenzarla tramite JavaScript, poiché ciò significherebbe un tipo di interazione con il file system dell'utente, che in JavaScript è consentito solo in pochissimi casi con autorizzazione esplicita a causa della sicurezza preoccupazioni.
Questa è una citazione dal LinkedIn Ingegneria squadra post sul blog LinkedIn for iPad: 5 techniques for smooth infinite scrolling in HTML5 che è rilevante a questa domanda:
UIWebView/Safari Mobile hanno strict limits for images. Il nostro stream è pieno di immagini grandi, quindi abbiamo raggiunto i limiti molto rapidamente. Una possibilità era usare l'elemento Canvas HTML5 per disegnare le immagini without running into memory issues. Tuttavia, abbiamo riscontrato che il disegno di immagini molto grandi su tela era lento, quindi abbiamo dovuto adottare un altro approccio: ogni volta che un'immagine veniva trascinata sufficientemente fuori dallo schermo, abbiamo sostituito l'attributo "src" del tag img con un'immagine molto piccola. Ciò ha garantito che la memoria utilizzata per il rendering di immagini di grandi dimensioni sia stata periodicamente liberata. Inoltre, ci siamo assicurati di non aver introdotto lo empty image src attribute bug.
La soluzione per sostituire con una piccola immagine è molto semplice e molto funzionale, grazie per il suggerimento :) –
Questo è un articolo vecchio, ma ancora utile: http://www.vargatron.com/2010/08/ipad-html5-js-memory-management/
Per fissare i gestori di eventi per ricevere una notifica su un elemento dell'immagine che entrano ed escono la finestra in modo da sostituire il suo attributo src con l'URL img reale (in finestra), o l'url segnaposto (fuori da finestra) ci sono questi plugin:
http://static.pixeltango.com/jQuery/Bullseye/ http://imakewebthings.com/jquery-waypoints/
Sostituzione della src valore degli attributi non garantisce ancora che il browser libererà memoria, ma è un forte suggerimento per il garbage collector. E comunque, se l'immagine non viene liberata in una volta, allora è ancora nella cache se l'utente deve decidere di tornare ad essa.
Vorrei mettere in discussione l'efficacia di qualcosa del genere. Sapete * che avete un problema di memoria e non qualcos'altro? Moreso, "scaricare" le immagini potrebbe non necessariamente cancellarle dalla memoria. –
dipende dall'approccio. come sarebbe la galleria? – Joseph