Почему атрибут данных используется таким образом?

Изучая, как использовать Bootstrap, я заметил, что миниатюры имеют странную разметку для источника изображения (по крайней мере, странную для меня).

<img data-src="holder.js/260x120" alt="260x120" style="width: 260px; height: 120px;" src="data:image/png;base64,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">

Что здесь происходит и почему это делается? Сохраняется ли изображение каким-то образом в локальном хранилище в какой-то момент в base64?

Чтобы уточнить, я спрашиваю о части src="image:/.


html twitter-bootstrap custom-data-attribute
person Cody    schedule 04.01.2013    source источник
comment
насколько мне известно: разрешены атрибуты с префиксом данных. Позволяет вам делать такие вещи, как сохранение миниатюры src для этого изображения в элементе изображения, чтобы упростить дальнейшие операции.   -  person Colleen    schedule 05.01.2013
comment
stackoverflow .com/questions/2450585/   -  person Colleen    schedule 05.01.2013
comment
Я знаю, что делает атрибут данных, но я не знаю, как изображение сохраняется и встраивается в этот атрибут данных.   -  person Cody    schedule 05.01.2013
comment
Это: ietf.org/rfc/rfc2397.txt, вики-статья: en.wikipedia.org/wiki/Data_URI_scheme   -  person Šime Vidas    schedule 05.01.2013
comment
@DoctorOreo Вы путаете атрибуты HTML5 data- со схемой data: URI. Это две совершенно разные вещи.   -  person Šime Vidas    schedule 05.01.2013
comment
Редактировать: О, вы говорите о чем-то другом. Я ничего не знаю о схеме data:URI.   -  person Colleen    schedule 05.01.2013

Ответы (2)


arrow_upward
5
arrow_downward

Вы видите не Атрибут данных HTML5, но схема URI данных. Цитирую Википедию:

Схема URI данных ... обеспечивает способ включения данных в веб-страницы, как если бы они были внешними ресурсами. Этот метод обычно позволяет извлекать отдельные элементы, такие как изображения и таблицы стилей, в одном HTTP-запросе, а не в нескольких HTTP-запросах, что может быть более эффективным.

То, что вы видите, — это данные изображения в кодировке base64, в данном случае PNG. Когда браузеры видят это, они декодируют данные в соответствии с инструкциями и отображают их, как если бы это был внешний ресурс.

Учитывая размер этого изображения, создатели Bootstrap справедливо считают, что более эффективно встроить такое изображение, чем хранить его отдельно. Если бы они сохранили его отдельно, для загрузки изображения потребовался бы дополнительный HTTP-запрос, что увеличило общее время загрузки страницы.

person Ashley Ross    schedule 04.01.2013

arrow_upward
0
arrow_downward

В случае с Bootstrap, я думаю, вы видите, что Javascript используется для генерации данных, которые входят в атрибут src.

Если вы посмотрите на необработанный источник (не источник в инспекторе), вы, вероятно, не увидите атрибут src, только data-src.

Атрибут data-src — это инструкция для javascript по использованию сценарияholder.js для генерации данных, которые должны быть помещены в src.

Итак,holder.js генерирует изображение, которое затем загружается в img как uri данных, как объясняется в других ответах.

person ChrisJ    schedule 21.12.2013