Conception réactive - Requêtes multimédias - Comment ne pas charger certaines images

StackOverflow https://stackoverflow.com/questions/7385433

Question

OK, j'ai donc conçu une disposition réactive qui ne montre pas d'images pour de très petites tailles d'écran, à l'aide de requêtes multimédias et display: none;.

Jusqu'ici tout va bien. Mais ces images téléchargent encore sur ces appareils, provoquant une augmentation de la bande passante.

Quelle est la bonne façon de faire en sorte que ces images ne soient pas téléchargées sur les appareils spécifiés?

Toute réponse serait très appréciée!

Était-ce utile?

La solution

La seule solution accessible en ce moment est d'envelopper l'image avec <noscript> Tags, puis retirez l'image plus tard avec JavaScript. Les cookies ne fonctionnent pas sur la charge de première page (htmlpreloadscanner), ni avec les CDN. Le reniflement du navigateur est inutile si vos images ne sont pas toujours à 100% de la fenêtre.

Slimmage.js implémente des images réactives conviviales dans 3KB de vanille JS.

Le balisage est également assez simple:

<noscript data-slimmage>
  <img src="http://z.zr.io/ri/1s.jpg?width=150" />
</noscript>

Bien sûr, vous pouvez créer une aide côté serveur pour même résumer cela.

Autres conseils

Deux options auxquelles je peux penser:

  1. Détectez les petits appareils sur le serveur à l'aide de reniflement du navigateur et envoyez-leur différents HTML qui ne fait pas référence aux images.
  2. Affichez les images via CSS au lieu de HTML (en style attributs si vous le souhaitez), en utilisant soit background-image ou :before/:after et content (non pris en charge par IE 6 ou 7) et enveloppez ce code CSS dans les requêtes multimédias afin qu'elle ne soit affichée que par des appareils avec des écrans plus grands.

Si cela ne vous dérange pas une dépendance JavaScript, vous pouvez vérifier window.innerWidth et insérer des balises d'image pour des écrans suffisamment grands.

Les images ne seraient demandées que si JavaScript est activé et la fenêtre suffisamment grande.

Si vous n'avez aucun problème en utilisant un javascript supplémentaire, alors vous pouvez essayer CETTE. Je suis tombé dessus en recherchant et en apprenant les requêtes avec les médias.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top