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

Question

Quelles sont les différences et les conséquences (bonnes et mauvaises) de l'utilisation de l'une ou l'autre des deux méthodes ? data-src ou src l'attribut de img ? Puis-je obtenir les mêmes résultats en utilisant les deux ? Si oui, quand faut-il utiliser chacune d'elles ?

Answer 1

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

Le site src est défini dans les spécifications HTML, et il a une signification fonctionnelle.

Le site data-src n'est que l'un des éléments de l'ensemble infini de data-* des attributs, qui n'ont pas de signification définie mais peuvent être utilisés pour inclure des données invisibles dans un élément, à des fins de script (ou de style).

Answer 2

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

Si vous voulez qu'un élément de métadonnées (sur n'importe quelle balise) puisse contenir une URL, utilisez alors data-src ou tout 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 - c'est juste un élément de métadonné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-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>

Answer 3

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

Answer 4

Src rendra la valeur immédiatement et c'est la valeur par défaut pour les images, les vidéos utilisant une source unique et les iframes.

data-src est utilisé lors du chargement paresseux pour empêcher l'image par défaut de se charger lors du chargement de la page. La plupart des bibliothèques de chargement paresseux utiliseront l'observateur d'intersection et copieront la valeur data-src dans src lorsqu'il sera temps de charger l'image.

Answer 5

L'attribut data src est juste utilisé pour lier les données, par exemple ASP.NET ...

Attribut src de W3School

Attribut MSDN datasrc