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

102

Quelles sont les différences et les conséquences (bonnes et mauvaises) de l'utilisation de l'un data-srcou l' autre de l' srcattribut de la imgbalise? Puis-je obtenir les mêmes résultats en utilisant les deux? Si oui, quand faut-il utiliser chacun d'eux?

html image Adam Pierzchała
la source

Réponses:

174

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

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

L' data-srcattribut est juste l'un des ensembles infinis d' 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 le style).

Jukka K. Korpela
la source
1
Angular.js utilise également data-src pour la liaison tardive des URL basées sur le modèle
Jeff
Merci pour la réponse claire :) sur le point d'utiliser jQuery.lazy et je ne savais pas trop ce qui se passait avec les scr
Timothy
19

Si vous souhaitez que l'image se charge et affiche une image particulière, utilisez .srcpour charger cette URL d'image.

Si vous voulez un élément de métadonnées (sur n'importe quelle balise) qui peut contenir une URL, utilisez data-srcou tout ce data-xxxque vous souhaitez sélectionner.

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

Exemple de srcsur 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 - c'est juste un morceau de méta-données 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-srcbalise 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>
jfriend00
la source
4

Le premier <img />n'est pas valide - srcest un attribut obligatoire. data-srcest un attribut qui peut être exploité par, par exemple, JavaScript, mais qui n'a aucune signification de présentation.

Tieson T.
la source
3
@ AdamPierzchała L'essentiel est le même - il n'y a pas de "soit / ou" à cette question; srcdoit être inclus. Vous utilisez des data-attributs pour ajouter des données supplémentaires pour un langage de script (comme JavaScript) à exploiter.
Tieson T.
4

L'attribut data-src fait partie de la collection d'attributs data- * introduite dans 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 par le code Javascript ou les règles CSS.

ElomSkillupsoft
la source