web-dev-qa-db-fra.com

Comment éviter la demande de toutes les images utilisées pour différents périphériques à l'aide de la requête multimédia?

Je veux savoir comment éviter de charger toutes les images que j'ai créées pour différents appareils à l'aide de la requête multimédia. Actuellement, mon balisage ressemble à celui ci-dessous:

    <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">

ci-dessus charge toutes les images, quel que soit l'appareil et alourdit la page pour les appareils mobiles. J'utilise razor cshtml et cherche le meilleur moyen de le mettre en œuvre.

Aucune suggestion ?

csspage-speedresponsive-webdesignasp.net-mvcmedia-queries
3
Sangeeta

Dans tous les cas, vous ne voudriez pas utiliser les requêtes multimédia basées sur CSS, car les navigateurs téléchargeront toutes ces images, qu'elles soient affichées ou masquées. Vous pouvez réaliser ce que vous voulez en utilisant le balisage HTML5 ou Javascript.

Voici quelques méthodes qui devraient vous aider à démarrer:

2
Simon Hayter