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

Wenn Sie möchten, dass das Bild zu laden und ein bestimmtes Bild anzeigen, dann verwenden Sie .src zu laden, dass Bild-URL.

Wenn Sie wollen ein Stück von meta-Daten (an einen tag) , kann eine URL enthalten, dann verwenden Sie data-src oder jede data-xxx, die Sie auswählen möchten.

MDN-Dokumentation über Daten-xxxx Attribute: https://developer.mozilla.org/en-US/docs/DOM/element.dataset

Beispiel src auf ein image-tag, wo das Bild lädt die JPEG-für Sie und ihn zeigt:

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

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

Beispiel von 'data-src' auf eine nicht-Bild-tag, wo das Bild noch nicht geladen ist - es ist nur ein Stück von meta-Daten über das 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 data-src auf ein image-tag als ein Ort zum speichern der URL eines alternativen Bildes:

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

InformationsquelleAutor der Antwort jfriend00

data-src-Attribut ist Teil des data -* - Attribute-Kollektion eingeführt in HTML5. Daten-src, die es uns ermöglichen, zusätzliche speichern von Daten, die keine Bedeutung haben, um den browser, aber das kann die Verwendung von Javascript-Code oder CSS-Regeln.

InformationsquelleAutor der Antwort ElomSkillupsoft