Jakie są wszystkie różnice między atrybutami src i data-src?

Jakie są różnice i konsekwencje (dobre i złe) z użyciem albo data-srcczy srcatrybut imgtagu? Czy mogę osiągnąć te same wyniki, używając obu? Jeśli tak, kiedy należy użyć każdego z nich?

Atrybuty srci data-srcnie mają ze sobą nic wspólnego, poza tym, że oba są dozwolone przez HTML5 CR i oba zawierają litery src. Wszystko inne jest inne.

srcAtrybut jest zdefiniowany w specyfikacji HTML, a to ma znaczenie funkcjonalne.

data-srcAtrybut jest tylko jednym z nieskończonego zbioru data-*atrybutów, które nie mają określone znaczenie, ale mogą być używane w celu włączenia niewidocznych danych w elemencie, do stosowania skryptów (lub stylizacji).

Jeśli chcesz, aby obraz ładował się i wyświetlał określony obraz, użyj, .srcaby załadować adres URL tego obrazu.

Jeśli potrzebujesz fragmentu metadanych (na dowolnym tagu), który może zawierać adres URL, użyj data-srclub dowolnego data-xxx, który chcesz wybrać.

Dokumentacja MDN dotycząca atrybutów data-xxxx: https://developer.mozilla.org/en-US/docs/DOM/element.dataset

Przykład srcznacznika obrazu, w którym obraz ładuje plik JPEG i wyświetla go:

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

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

Przykład „data-src” w tagu innym niż obraz, gdzie obraz nie został jeszcze załadowany - to tylko fragment metadanych w tagu 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>

Przykład data-src tagu obrazu używanego jako miejsce do przechowywania adresu URL alternatywnego obrazu:

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

Pierwsza <img />jest nieprawidłowa - srcjest wymaganym atrybutem. data-srcjest atrybutem, który można wykorzystać, powiedzmy, JavaScript, ale nie ma znaczenia prezentacyjnego.

atrybut data-src jest częścią zbioru atrybutów data- * wprowadzonego w HTML5. data-src pozwala nam przechowywać dodatkowe dane, które nie mają znaczenia dla przeglądarki, ale mogą być używane przez kod JavaScript lub reguły CSS.

Cóż, atrybut data src jest używany tylko do wiązania danych, na przykład ASP.NET ...

Atrybut src W3School

Atrybut datasrc MSDN