Nachteile dieser CSS-Sprite-Lösung für Retina-Displays?

Question

Meine Idee, vorausgesetzt, Sie mit einem 200x200 Sprite beginnen (dh die doppelte Auflösung Bild 400x400 ist), ist dies:

.sprite { 
    background-image:url('1x.png'); 
    background-repeat: no-repeat; 
    background-size: 200px 200px; 
} 

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    .sprite { 
     background-image:url('2x.png'); 
    } 
} 

anschauliches Beispiel: http://ov3rkill.com/temp/a5dii52/

Ich habe für eine Weile zu kämpfen versuchen, das zu bestimmen, Der beste Weg, um Bilder mit höherer Auflösung zu liefern (vorher habe ich alle Bilder getrennt und einzeln sortiert) und das scheint ehrlich gesagt zu einfach.

Kann jemand mögliche Nachteile sehen? Ich spiele damit für den Produktionseinsatz und bisher scheint es zu funktionieren.

Answer 1

Da die Medienabfrage für Retina beim Laden aufgerufen wird, sollte sie den ursprünglichen Aufruf überschreiben, um das kleine Bild zu laden. Ich habe noch nie erlebt, wie das Bild mit niedriger Auflösung auf diese Weise auf Retina-Displays aufblitzte.

Hat jemand JS verwendet, um zu bestätigen, dass das kleinere Bild auf einem Retina-Display geladen wird? Ich bin neugierig zu wissen.