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?
Antworten:
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.
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>
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.
srcmuss enthalten sein. Sie verwenden data-Attribute, um zusätzliche Daten für eine Skriptsprache (wie JavaScript) hinzuzufügen.
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.
Nun, das data src-Attribut wird nur zum Binden von Daten verwendet, zum Beispiel ASP.NET ...