В чем все различия между атрибутами src и data-src?

Каковы различия и последствия (хорошие и плохие) использования либо data-srcили srcатрибут imgтега? Могу ли я добиться тех же результатов, используя оба варианта? Если да, то когда следует использовать каждый из них?

Атрибуты srcи не data-srcимеют ничего общего, за исключением того, что оба они разрешены HTML5 CR и оба содержат буквы src. Все остальное другое.

srcАтрибут определен в HTML спецификации, и имеет функциональное значение.

data-srcАтрибут является лишь одним из бесконечного множества data-*атрибутов, которые не определяются значения , но могут быть использованы , чтобы включить невидимые данные в элементе, для использования в сценариях (или стилизации).

Если вы хотите, чтобы изображение загружалось и отображало конкретное изображение, используйте .srcдля загрузки URL этого изображения.

Если вам нужен фрагмент метаданных (по любому тегу), который может содержать URL-адрес, используйте data-srcлюбой из них, data-xxxкоторый вы хотите выбрать.

Документация MDN по атрибутам data-xxxx: https://developer.mozilla.org/en-US/docs/DOM/element.dataset

Пример srcтега изображения, в котором изображение загружает для вас JPEG и отображает его:

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

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

Пример 'data-src' в теге, отличном от изображения, где изображение еще не загружено - это просто фрагмент метаданных в теге 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>

Пример data-srcтега изображения, используемого как место для хранения URL-адреса альтернативного изображения:

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

Первый <img />недействителен - srcэто обязательный атрибут. data-src- это атрибут, который может использоваться, скажем, в JavaScript, но не имеет презентационного значения.

Атрибут data-src является частью коллекции атрибутов data- *, представленной в HTML5. data-src позволяет нам хранить дополнительные данные, которые не имеют значения для браузера, но могут использоваться кодом Javascript или правилами CSS.

Атрибут data src просто используется для привязки данных, например ASP.NET ...

Атрибут src W3School

Атрибут MSDN datasrc