Подтвердить что ты не робот

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

Если вы хотите, чтобы изображение загружалось и отображалось определенное изображение, используйте .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>

Ответ 3

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

Ответ 4

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