Was sind die Unterschiede zwischen den Attributen src und data-src?

101

Was sind Unterschiede und Konsequenzen (sowohl gut als auch schlecht) bei der Verwendung von Tags data-srcoder srcAttributen von imgTags? Kann ich mit beiden die gleichen Ergebnisse erzielen? Wenn ja, wann sollte jeder von ihnen verwendet werden?

html image Adam Pierzchała
quelle

Antworten:

174

Die Attribute srcund data-srchaben nichts gemeinsam, außer dass sie beide von HTML5 CR zugelassen sind und beide die Buchstaben enthalten src. Alles andere ist anders.

Das srcAttribut ist in HTML-Spezifikationen definiert und hat eine funktionale Bedeutung.

Das data-srcAttribut ist nur eines der unendlich vielen data-*Attribute, die keine definierte Bedeutung haben, aber verwendet werden können, um unsichtbare Daten in ein Element aufzunehmen, um sie in Skripten (oder im Styling) zu verwenden.

Jukka K. Korpela
quelle
1
Angular.js verwendet auch data-src für die späte Bindung von URLs basierend auf dem Modell
Jeff
Vielen Dank für die klare Antwort :) Ich wollte gerade jQuery.lazy verwenden und war mir nicht sicher, was mit den Scrs los war
Timothy
19

Wenn Sie möchten, dass das Bild geladen und ein bestimmtes Bild angezeigt wird, verwenden Sie .srcdiese Option, um diese Bild-URL zu laden.

Wenn Sie Metadaten (auf einem beliebigen Tag) möchten, die eine URL enthalten können, verwenden Sie data-srcoder eine beliebige data-xxx, die Sie auswählen möchten.

MDN-Dokumentation zu data-xxxx-Attributen: https://developer.mozilla.org/en-US/docs/DOM/element.dataset

Beispiel für srcein Bild-Tag, bei dem das Bild das JPEG für Sie lädt und anzeigt:

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

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

Beispiel für 'data-src' auf einem Nicht-Bild-Tag, auf dem das Bild noch nicht geladen ist - es handelt sich nur um Metadaten auf dem div-Tag:

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

Beispiel für data-srcein Bild-Tag, das als Speicherort für die URL eines alternativen Bildes verwendet wird:

<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
quelle
4

Das erste <img />ist ungültig - srcist ein erforderliches Attribut. data-srcist ein Attribut, das beispielsweise von JavaScript genutzt werden kann, aber keine Präsentationsbedeutung hat.

Tieson T.
quelle
3
@ AdamPierzchała Das Wesentliche ist dasselbe - es gibt kein "entweder / oder" zu dieser Frage; srcmuss enthalten sein. Sie verwenden data-Attribute, um zusätzliche Daten für eine Skriptsprache (wie JavaScript) hinzuzufügen.
Tieson T.
4

Das data-src-Attribut ist Teil der in HTML5 eingeführten data- * attribute-Sammlung. Mit data-src können wir zusätzliche Daten speichern, die für den Browser keine Bedeutung haben, aber von Javascript-Code oder CSS-Regeln verwendet werden können.

ElomSkillupsoft
quelle