Qual è l'alternativa migliore alla lira ridotta per le immagini?

Vorrei utilizzare lowsrc con il tag img per mostrare prima un'immagine a bassa risoluzione (e più veloce) mentre viene caricata l'immagine con risoluzione maggiore.Qual è l'alternativa migliore alla lira ridotta per le immagini?

Le immagini a risoluzione elevata sono @ 800 KB e le versioni a bassa risoluzione a 50 KB.

Dato che lowsrc è stato deprecato e molti browser non lo supportano apparentemente, sto cercando una soluzione che faccia la stessa cosa, preferibilmente con il minor numero possibile di codice.

Esiste un buon rimpiazzo per lowsrc?

fonte

2014-11-28 Bill Noble

Usa l'immagine a bassa risoluzione come src e sostituisci il onr di src – Jamiec

<img src="lowres.jpg" onLoad="this.src='highres.jpg'" width="?" height="?">

fonte

2014-11-28 15:02:02

Che funziona! Così semplice anche. Grazie. –

@BillNoble nessun problema! –

Questa soluzione funziona bene, tranne che provoca un ciclo di richiesta infinito in Firefox poiché provoca l'attivazione dell'evento onload dopo che è stato scritto src. Ho risolto il problema aggiungendo '; this.onload = new Function();' alla fine però. – Ultimater

Ho due (tre in futuro) soluzioni:

Pure CSS. Funzionerà se si dispone di un'unica immagine segnaposto per tutte le immagini caricate. Basta includere uno sfondo per quelle immagini che hanno la proprietà [lowsrc] e specificare un'altezza minima.
Utilizzare alcuni JS per impostare lo sfondo. Vedere http://codepen.io/anon/pen/yyQdYJ e impostare <body onload> correttamente.
Futuro. Attualmente non funziona (2015). Simile al n. 2, ma utilizzando attr() CSS function si potrebbe impostare lo sfondo sul valore di [lowsrc].

Tutte queste soluzioni funzionano con uno sfondo, che non consente di specificare l'altezza corretta dell'immagine in base all'altezza dello sfondo.

// Not working yet 
img[lowsrc] { 
    width: 100%; 
    min-height: 10em; 
    background-image: attr(lowsrc); 
}

Avrebbero potuto mantenuto [lowsrc] di lavoro: -/

fonte

2015-03-18 15:12:34 Slawa

La raccomandazione W3C che definisce HTML5 ha una lista di obsolete, nonconforming features, tra cui l'attributo lowsrc. La sua raccomandazione è di creare un'immagine JPEG progressiva la cui prima scansione abbia lo stesso livello di dettaglio spaziale dell'immagine a 50 kB e le cui scansioni successive riempiano i dettagli extra nell'immagine completa da 800 kB. Questo meccanismo richiede presumibilmente che i programmi utente utilizzino le richieste dell'intervallo HTTP per determinare la quantità di dati da recuperare rispetto alla dimensione in cui viene visualizzata l'immagine, così come utilizzano le richieste di intervallo per cercare attraverso l'origine di un elemento audio o video.

fonte

2015-12-08 18:53:43

Qual è l'alternativa migliore alla lira ridotta per le immagini?

risposta

Problemi correlati