web-dev-qa-db-fra.com

Navigateurs mobiles! Ignorent-ils `<noscript> <img>` (Responsive Design avec Framework Zurb Foundation (Interchange / Noscript))

Expérimentation d'images réactives avec échange

J'expérimente avec Interchange by Zurb Foundation pour servir diverses versions d'images à différents appareils. Par exemple, 200x100 pour les mobiles, 300x100 pour les tablettes et 600x100 pour les ordinateurs de bureau! Cette solution fonctionne avec JS, ce qui est excellent, mais je suis convaincu que tous les sites Web devraient fonctionner dans une certaine mesure avec JS désactivé.

Le code

J'utilise le code ci-dessous qui se déclenche via le fichier foundation-min.js qui permet à tout de fonctionner comme prévu:

<img data-interchange="[/default.jpg, (default)], [/bigger-image.jpg, (large)]">

Méthode de secours suggérée par la Fondation Zurb

Si vous souhaitez prendre en charge les navigateurs avec JavaScript désactivé, nous vous recommandons de définir votre image par défaut dans une balise afin que ces navigateurs aient un repli:

<noscript><img src="/path/to/default.jpg"></noscript>

Cela ressemble à une solution appropriée mais en regardant Firebug et en regardant la réponse nette, je peux voir que lorsque les pages sont rendues dans Firefox, il télécharge l’image responsive et cette image dans le script même même si JS n'est pas rendue.

Le Rant

Donc, le problème est que je veux servir des images dans les résolutions qui paraissent bien mais qui téléchargent aussi rapidement, après tout, c’est l’objectif principal de l’utilisation de telles méthodes, mais comme il télécharge les images dans noscript, cela en fait une solution inutile.

La question

Est-ce que tous les navigateurs mobiles téléchargent des images dans noscript même lorsque JS est activé? Que pouvez-vous suggérer d'autre (ou méthode de repli sur le bureau/mobile) (sans trop entrer dans le code, je ne suis pas si paresseux!)

imagesmobilepage-speedoptimizationresponsive-webdesign
4
Simon Hayter

Mes propres tests sur noscript à l'aide de l'onglet net de firebug ne chargent en réalité aucune image contenue dans les balises noscript sauf si javascript est désactivé.

De même, la première affiche n’a pas de tels problèmes et renvoie à la spécification w3 indiquant que de telles balises seront traitées comme du texte lorsque js est activé. https://stackoverflow.com/questions/14719111/is-an-image-within-a-noscript-tag-only-downloaded-if-javascript-is-disabled

Réflexions sur les éventuelles raisons pour lesquelles vous obtenez un résultat différent:

  1. Avez-vous mis à jour les paramètres de configuration de Firefox?
  2. Le code que vous avez testé est-il valide en HTML?
  3. Y a-t-il une sorte de cache en cours?
3
Richard B

Selon Mozilla , le support de <noscript> sur les navigateurs mobiles est bon:

  • Android - (Oui)
  • Firefox Mobile (Gecko) - 1.0 (1.0)
  • IE Mobile - (Oui)
  • Opera Mobile - (Oui)
  • Safari Mobile - (Oui)

Les navigateurs mobiles qui appliquent noscript à la norme ne doivent télécharger aucune image à partir des balises lorsque JavaScript est activé.

2
Stephen Ostermiller