web-dev-qa-db-fra.com

Quelles sont toutes les différences entre les attributs src et data-src?

Quelles sont les différences et les conséquences (bonnes et mauvaises) d’utiliser _ data-src ou src attribut de img tag? Puis-je obtenir les mêmes résultats en utilisant les deux? Si oui, quand faut-il utiliser chacun d'eux?

htmlhtml5image
88
Adam Pierzchała

Les attributs src et data-src n'ont rien en commun, sauf qu'ils sont tous deux autorisés par HTML5 CR et qu'ils contiennent tous deux les lettres src. Tout le reste est différent.

L'attribut src est défini dans les spécifications HTML et a une signification fonctionnelle.

Le data-src attribut est juste l’un des infinis ensembles de data-* attributs, qui n'ont pas de signification définie mais peuvent être utilisés pour inclure des données invisibles dans un élément, pour une utilisation dans les scripts (ou les styles).

159
Jukka K. Korpela

Si vous voulez que l'image charge et affiche une image particulière, utilisez .src pour charger cette URL d'image.

Si vous voulez une métadonnée (sur n’importe quelle balise) pouvant contenir une URL, utilisez data-src ou n'importe quel data-xxx que vous voulez sélectionner.

Documentation MDN sur les attributs data-xxxx: https://developer.mozilla.org/en-US/docs/DOM/element.dataset

Exemple de src sur une balise d'image où l'image charge le JPEG pour vous et l'affiche:

<img id="myImage" src="http://mydomain.com/foo.jpg">

<script>
    var imageUrl = document.getElementById("myImage").src;
</script>

Exemple de 'data-src' sur une balise non-image où l'image n'est pas encore chargée - il ne s'agit que d'une métadonnée sur la balise div:

<div id="myDiv" data-src="http://mydomain.com/foo.jpg">

<script>
    // in all browsers
    var imageUrl = document.getElementById("myDiv").getAttribute("data-src");

    // or in modern browsers
    var imageUrl = document.getElementById("myDiv").dataset.src;
</script>

Exemple de data-src sur une balise d’image utilisée comme emplacement pour stocker l’URL d’une autre image:

<img id="myImage" src="http://mydomain.com/foo.jpg" data-src="http://mydomain.com/foo.jpg">

<script>
    var item = document.getElementById("myImage");
    // switch the image to the URL specified in data-src
    item.src = item.dataset.src;
</script>
18
jfriend00

l'attribut data-src fait partie de la collection d'attributs data- * introduite en HTML5. data-src nous permet de stocker des données supplémentaires qui n'ont aucune signification pour le navigateur, mais qui peuvent être utilisées avec le code Javascript ou les règles CSS.

3
ElomSkillupsoft

La première <img /> n'est pas valide - src est un attribut requis. data-src est un attribut qui peut être exploité, par exemple, par JavaScript, mais n’a aucune signification de présentation.

2
Tieson T.