Come posso gestire il caricamento lento delle immagini in risposta?

Question

Come posso gestire il caricamento lento delle immagini in risposta?

#1 da (1 voti)
#2 da (1 voti)
#3 da (1 voti)

0

Ho il seguente problema. Ho un'applicazione reattiva che deve caricare una griglia di singole immagini di dimensioni ridotte, fino a poche centinaia (si pensi a una griglia 20x20 in cui ogni cella è un'immagine 100x100). C'è anche una combobox in cui posso scegliere diverse opzioni di selezione, e ogni opzione dovrà mostrare un diverso set di immagini nella matrice.

In questo momento, quello che faccio è avere un componente che reagisce all'attuale puntello con gli ID immagine e crea un tag <img src> con l'URL corretto. Funziona, ma ha alcuni problemi.

Un problema è che il recupero dell'immagine, per ragioni che non approfondirò, è lento e rimarrà lento. Può richiedere fino a un minuto per ottenere tutte le immagini, e questo è previsto.

Il problema è che con la disposizione attuale, succede quanto segue:

non appena il componente per la griglia viene passato un elenco di ID immagine, i tag img vengono aggiunti e viene generata una serie di richieste asincrone per ciascuno dei tag. Questo può richiedere del tempo per essere completato e non può essere interrotto.
quando cambio la casella combinata (potenzialmente con l'operazione sopra non ancora completata), il componente prop che tiene la lista di id cambia, ogni tag <img src> viene modificato reagendo, questo genera un nuovo async recupero della nuova serie di immagini .

Il risultato finale è che questo non solo accumula richieste, ma finisce anche per creare una strana situazione in cui la griglia mostra una miscela di vecchie e nuove immagini.

Ho il controllo sia del server che del client. A condizione che il recupero delle immagini sia lento, mi chiedo se ci siano strategie migliori per:

ridurre e controllare la quantità di richieste asincrone che eseguiamo per recuperare le immagini, o cancellarle o risolvere questo problema in un modo diverso.
reagiscono, se c'è un modo per cancellare le celle quando gli oggetti cambiano da una lista di immagini all'altra, in modo che le celle vengano svuotate e io non finisca con una miscela di vecchie e nuove immagini. React vede il cambiamento da una lista all'altra e genera il nuovo stato, ma ho bisogno di generare uno stato intermedio in cui i tag <img> vengono rimossi, altrimenti la vecchia immagine rimane finché non viene recuperata la nuova.

web-development react

posta Stefano Borini 28.03.2018 - 12:52

fonte

3 risposte

Leggi altre domande sui tag web-development react

Per un sito Web che utilizza la propria API, è standard per comunicare su HTTP? Come dimostrare vantaggi per il business nel software refactoring? [duplicare]

score 1 · Answer 1

Alcune idee che ti vengono in mente (dato che non conosco tutte le circostanze, non c'è una risposta definita):

Richieste aggregate: è possibile inviare una richiesta per più immagini in una sola chiamata. Questo non deve essere tutte le 400 celle in una richiesta, ma possono essere blocchi più piccoli, e. g. una riga di immagini per richiesta, una colonna, mezza riga o colonna o due righe o colonne, o qualsiasi altro blocco come un blocco 2x2, o un blocco 5x10 o qualsiasi altra cosa. Ciò ridurrebbe il sovraccarico del trasferimento, a scapito di un'elaborazione più complessa.
Dato che hai il controllo del cliente, puoi interrompere lo spreco di risorse annullando le richieste non più necessarie mentre l'utente seleziona qualcos'altro. Il modo in cui implementerei questo è dare a ogni richiesta un ID univoco e mantenere un set di ID per le richieste inviate per le quali il risultato non è stato completamente ricevuto. Quindi è possibile inviare l'elenco delle richieste obsolete con una nuova richiesta e il server potrebbe abbandonare questi processi. E il tuo cliente dovrebbe solo sapere di ignorare i potenziali messaggi di errore per le richieste abbandonate.

score 1 · Answer 2

reduce and control the amount of async requests we perform to retrieve the images, or cancel them, or solve this problem in a different way.

Onestamente, sembra abbastanza difficile. L'unico suggerimento che ho in negozio aggiunge un livello di complessità, ma potrebbe essere l'unica opzione ... a condizione che il tuo server funzioni 304 Not Modified per chiamate consecutive alla stessa immagine.

In primo luogo, credo che utilizzando <img src="..." /> , molti browser continueranno a caricare l'immagine anche se si spegne la fonte. La logica alla base di questo è che può essere memorizzato nella cache in seguito.

Quindi, l'unico modo per farlo è recuperare le immagini "manualmente" per XHR, e una volta che la risposta è arrivata completamente, inserisci di nuovo il link nell'immagine src che dovrebbe ottenere un 304, quindi caricarlo dal cache del browser. Il grande vantaggio dell'XHR è ovviamente che puoi interrompere la richiesta in qualsiasi momento, ad esempio quando selezioni qualcos'altro nella tua casella combinata.

so that the cells are emptied and I don't end up with a mixture of old and new images.

Bene, metti semplicemente un passaggio intermedio in cui riempi la griglia con immagini segnaposto, come un cerchio di caricamento; P

score 1 · Answer 3

Penso che Medium risolva questo problema inizializzando tutte le immagini con versioni a bassa risoluzione di ciò che sta per essere visualizzato. Le immagini memorizzate nella cache sono prerender di piccole sfocature di bassa qualità di tipo jpg che appaiono quasi all'istante. Più richieste asincrone restituiscono le immagini complete più tardi.