Quali sono le differenze tra gli attributi src e data-src?

Quali sono le differenze e le conseguenze (positive e negative) dell'utilizzo di uno data-srco degli srcattributi del imgtag? Posso ottenere gli stessi risultati usando entrambi? In caso affermativo, quando dovrebbero essere utilizzati ciascuno di essi?

Gli attributi srce data-srcnon hanno nulla in comune, tranne che sono entrambi consentiti da HTML5 CR ed entrambi contengono le lettere src. Tutto il resto è diverso.

L' srcattributo è definito nelle specifiche HTML e ha un significato funzionale.

L' data-srcattributo è solo uno degli infiniti set di data-*attributi, che non hanno un significato definito ma possono essere utilizzati per includere dati invisibili in un elemento, da utilizzare nello scripting (o nello stile).

Se desideri che l'immagine carichi e visualizzi un'immagine particolare, utilizza .srcper caricare l'URL dell'immagine.

Se desideri un metadati (su qualsiasi tag) che possa contenere un URL, utilizza data-srco qualsiasi altro data-xxxche desideri selezionare.

Documentazione MDN sugli attributi data-xxxx: https://developer.mozilla.org/en-US/docs/DOM/element.dataset

Esempio di srcsu un tag immagine in cui l'immagine carica il JPEG per te e lo visualizza:

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

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

Esempio di "data-src" su un tag non immagine in cui l'immagine non è ancora caricata: è solo un pezzo di metadati sul tag 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>

Esempio di data-srcsu un tag immagine utilizzato come posizione per memorizzare l'URL di un'immagine alternativa:

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

Il primo <img />non è valido: srcè un attributo obbligatorio. data-srcè un attributo che può essere sfruttato, ad esempio, da JavaScript, ma non ha alcun significato di presentazione.

L'attributo data-src fa parte della raccolta di attributi data- * introdotta in HTML5. data-src ci consente di memorizzare dati extra che non hanno alcun significato per il browser ma che possono essere utilizzati dal codice Javascript o dalle regole CSS.

Bene, l'attributo data src viene utilizzato solo per l'associazione dei dati, ad esempio ASP.NET ...

Attributo src di W3School

Attributo datasrc di MSDN