У чому всі відмінності між атрибутами 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.

Ну атрибут src даних просто використовується для прив'язки даних, наприклад ASP.NET ...

Атрибут src W3School

Атрибут MSDN datasrc