img non risponde alle dimensioni specificate di srcset

Question

Volevo implementare le immagini reattive utilizzando srcset, come descritto here, quindi l'immagine src che l'utente carica è la più simile alla sua risoluzione.

Il fatto è che ho fatto questo test e non risponde ai cambiamenti viewport,

<img src="https://lorempixel.com/400/200/sports/" 
     alt="" 
     sizes="(min-width:1420px) 610px, 
      (min-width:1320px) 500px, 
      (min-width:1000px) 430px, 
      (min-width:620px) 280px, 
      280px" 
     srcset="https://lorempixel.com/620/200/sports/ 280w, 
       https://lorempixel.com/1000/300/animals/ 430w, 
       https://lorempixel.com/1320/400/cats/ 610w, 
       https://lorempixel.com/1420/500/abstract/ 1000w, 
       https://lorempixel.com/1600/600/fashion/ 1220w" /> 

jsfiddle: http://jsfiddle.net/ad857m1r/9/

Qualche idea di cosa mi manca?

Answer 1

L'attributo srcset viene interpretato dal browser al primo carico, poi l'immagine caricata viene memorizzata in cache e the browser could not load any other image fino all'azzeramento della cache e ricaricare la pagina.

Se si desidera che il srcset viene reinterpretato su ogni resize evento della pagina, è necessario aggiornarlo, ma l'aggiunta di una variabile casuale alla fine di ogni url, il browser ricarica la corretta.

Ho aggiunto un ritardo a questo processo per ridurre il numero di volte che viene eseguito. Noterai che questa pratica costringe il browser a scaricare l'immagine corretta ad ogni ridimensionamento e questo è negativo per la larghezza di banda. Non raccomando l'uso di questa tecnica, lascia che il browser decida quale immagine usi in ogni situazione. Penso che il ridimensionamento del viewport non sia una situazione comune in un ambiente quotidiano. Forse è meglio per i tuoi scopi l'uso di picture element (usando some approach per renderlo compatibile con i vecchi browser) come dice @KrisD.

var img = document.getElementById("myImage"); 
var srcset = img.getAttribute("srcset"); 
var delay; 

window.onresize = function() { 

    clearTimeout(delay); 

    delay = setTimeout(refreshImage, 500); 

} 

function refreshImage() { 

    var reg = /([^\s]+)\s(.+)/g; 
    var random = Math.floor(Math.random() * 999999); 

    img.setAttribute("srcset", srcset.replace(reg, "$1?r=" + random + " $2")); 

} 

jsfiddle

Answer 2

quando si tenta di applicare il codice dell'esempio per thelink lei ha citato hai fatto poche modifiche per il codice nell'esempio:

1- quando si imposta la valori di attributo size hai impostato l'ultimo e il valore predefinito a 280 come nell'esempio spiegato prima del valore 580 non come hai fatto 280

2- quando usi uno dei geni fittizi ratori delle immagini che hai fatto una barra alla fine del link dell'immagine, quindi spazio prima di legare l'immagine con le sue dimensioni e questo è stato tradotto dal sito del generatore di immagini con un testo sull'immagine che devi modificare il codice al seguente per essere lo stesso spiegato nel link di esempio che hai citato

<img src="https://lorempixel.com/400/200/sports/" 
    alt="" 
    sizes="(min-width:1420px) 610px, 
     (min-width:1320px) 500px, 
     (min-width:1000px) 430px, 
     (min-width:620px) 580px, 
     280px" 
    srcset="https://lorempixel.com/620/200/sports 280w, 
      https://lorempixel.com/1000/300/animals 430w, 
      https://lorempixel.com/1320/400/cats 610w, 
      https://lorempixel.com/1420/500/abstract 1000w, 
      https://lorempixel.com/1600/600/fashion 1220w" /> 

Answer 3

Basta copiarlo e incollarlo. Per prima cosa devi sapere che devi organizzare la dimensione delle immagini come un ordine crescente e quindi dovrai adeguarti in base a ciò.

Per esempio

<img src="http://lorempixel.com/400/200/sports/" 
     alt="" 
     sizes="(min-width:1420px) 610px, 
      (min-width:1320px) 500px, 
      (min-width:1000px) 430px, 
      (min-width:620px) 280px, 
      280px" 
     srcset="http://lorempixel.com/620/200/sports/ 620w, 
       http://lorempixel.com/1000/300/animals/ 1000w, 
       http://lorempixel.com/1320/400/cats/ 1320w, 
       http://lorempixel.com/1420/500/abstract/ 1420w, 
       http://lorempixel.com/1600/600/fashion/ 1600w" /> 

Con questo è possibile visualizzare il risultato, ho appena provato questo e il suo lavoro

img { 
 
    width: 100%; 
 
}

<img src="http://lorempixel.com/400/200/sports/" 
 
     alt="" 
 
     sizes="(min-width:1420px) 610px, 
 
      (min-width:1320px) 500px, 
 
      (min-width:1000px) 430px, 
 
      (min-width:620px) 280px, 
 
      280px" 
 
     srcset="http://lorempixel.com/620/200/sports/ 620w, 
 
       http://lorempixel.com/1000/300/animals/ 1000w, 
 
       http://lorempixel.com/1320/400/cats/ 1320w, 
 
       http://lorempixel.com/1420/500/abstract/ 1420w, 
 
       http://lorempixel.com/1600/600/fashion/ 1600w" />

Note -> Chiamate l'immagine come image.jpg quindi sarebbe più efficace.