it-swarm.com.de

Wie vermeide ich die Anforderung aller Bilder, die für verschiedene Geräte verwendet werden, mithilfe einer Medienabfrage?

Ich möchte wissen, wie ich vermeiden kann, alle Bilder zu laden, die ich mit der Medienabfrage für verschiedene Geräte erstellt habe. Momentan sieht mein Markup wie folgt aus:

    <img src="/media/1062/lg.png" alt="Fresh from garden" class="visible-lg">
    <img src="/media/1062/lg.png" alt="Fresh from garden" class="visible-md">
    <img src="/media/1062/lg.png" alt="Fresh from garden" class="visible-sm">
    <img src="/media/1062/lg.png" alt="Fresh from garden" class="visible-xs">

oben lädt alle Bilder unabhängig vom Gerät und macht die Seite für mobile Geräte schwerer. Ich verwende razor cshtml und suche nach dem besten Weg, dies zu implementieren.

Irgendwelche Vorschläge ?

3
Sangeeta

Sie möchten auf keinen Fall CSS-basierte Medienabfragen verwenden, da Browser all diese Bilder herunterladen, unabhängig davon, ob sie angezeigt oder ausgeblendet werden. Sie können mit HTML5-Markup oder Javascript das erreichen, was Sie wollen.

Hier sind nur einige Methoden, mit denen Sie beginnen sollten:

2
Simon Hayter