Quel est le moyen valide d'inclure une image sans src?

Question

J'ai une image que je vais dynamiquement remplir avec un src plus tard avec du javascript, mais pour plus de facilité, je veux que la balise image existe au chargement de la page mais qu'elle n'affiche rien. Je sais que est invalide, alors quelle est la meilleure façon de faire cela?

Answer 1

Une autre option consiste à intégrer une image vide. N'importe quelle image qui convient à votre objectif fera l'affaire, mais l'exemple suivant encode un GIF qui ne fait que 26 octets - provenant de http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever

Modifier en fonction du commentaire ci-dessous :

Bien sûr, vous devez tenir compte de vos exigences en matière de prise en charge du navigateur. Aucune prise en charge d'IE7 ou moins est notable. http://caniuse.com/datauri

Answer 2

Alors qu'il n'existe aucun moyen valide d'omettre la source d'une image, il existe des sources qui ne causeront pas de hits au serveur. J'ai récemment eu un problème similaire avec des iframe et j'ai déterminé que //:0 était la meilleure option. Non, vraiment!

Commencer par // (omettre le protocole) fait que le protocole de la page actuelle est utilisé, évitant ainsi les avertissements de "contenu non sécurisé" dans les pages HTTPS. Omettre le nom d'hôte n'est pas nécessaire, mais cela le rend plus court. Enfin, un port de :0 garantit qu'une requête au serveur ne peut pas être faite (ce n'est pas un port valide, selon la spécification).

C'est le seul URL que j'ai trouvé qui n'a provoqué aucun hit au serveur ni aucun message d'erreur dans aucun navigateur. Le choix habituel — javascript:void(0) — provoquera un avertissement de "contenu non sécurisé" dans IE7 s'il est utilisé sur une page servie via HTTPS. Tout autre port a provoqué une tentative de connexion au serveur, même pour des adresses invalides. (Certains navigateurs se contenteraient de faire la requête invalide et attendraient qu'elle se termine.)

Ceci a été testé dans Chrome, Safari 5, FF 3.6, et IE 6/7/8, mais je m'attends à ce que cela fonctionne dans n'importe quel navigateur, car c'est censé être la couche réseau qui annule toute requête tentée.

Answer 3

Je recommande d'ajouter dynamiquement les éléments, et si vous utilisez jQuery ou une autre bibliothèque JavaScript, c'est assez simple:

• http://api.jquery.com/appendTo/
• http://api.jquery.com/prependTo/
• http://api.jquery.com/html/

Regardez aussi prepend et append. Sinon, si vous avez une balise image comme ça, et que vous voulez la rendre valide, vous pourriez envisager d'utiliser une image factice, comme un gif ou png transparent de 1px.

Answer 4

Je n'ai pas fait cela depuis un moment, mais j'ai dû traverser cette même situation une fois.

Est mon préféré - le //:0 implique que vous tenterez de faire une connexion HTTP/HTTPS au serveur d'origine sur le port zéro (le port tcpmux?) - ce qui est probablement inoffensif, mais je préfère quand même ne pas le faire. Bon, le navigateur peut voir le port zéro et ne pas envoyer de requête. Mais je préférerais quand même que ce ne soit pas spécifié de cette manière quand ce n'est probablement pas ce que vous voulez dire.

Quoi qu'il en soit, le rendu de about:blank est en réalité très rapide dans tous les navigateurs que j'ai testés. Je l'ai juste jeté dans le validateur du W3C et il n'a pas râlé, donc cela pourrait même être valide.

Édition : Ne faites pas ça; cela ne fonctionne pas sur tous les navigateurs (cela affichera une icône 'image cassée' comme indiqué dans les commentaires pour cette réponse). Utilisez plutôt la solution

Answer 5

J'utilise personnellement un about:blank src et je gère l'icône d'image cassée en réglant l'opacité de l'élément img à 0.