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) 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?

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).

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>

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.

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.

Eh bien, l'attribut data src est simplement utilisé pour la liaison de données, par exemple ASP.NET ...

Attribut src de W3School

Attribut MSDN datasrc