Как показывать alt изображения текстом?

Question

[lacrim]

Вопрос банальный забыл как javascript / jquery заставляет показывать alt-"text" альтернативный текст на странице рядом с изображением простым текстом.

Спасибо Евгений Петров за решение и Алексей Николаев за обращение к здравому смыслу! Написал ещё одну похожую конструкцию для схожей задачи, может кому пригодится, вытягивает текст из title

<script type='text/javascript'>
$(window).load(function(){
$('img.catalog').each(function() {
    $(this).after( "<div class='img-title'>" + $(this).attr('title') + "</div>" ); 
});
});  
</script>

Answer 1

[Евгений Петров]

$('img').each(function () {
	$(this).after($('<span>').html($(this).attr('alt')));
})

Как верно заметил @Heian, лучше alt использовать по его прямому назначению (ошибка при загрузке изображений). Тогда для замены таких изображений:

$('img').each(function () {
	if (this.readyState != 'complete') {
		$(this).on('error', function () {
			$(this).replaceWith($('<span>').html($(this).attr('alt')));
		});
	}
});

Answer 2

[Алексей Николаев]

Атрибут, отвечающий за замену незагрузившегося изображения текстом - alt (у тега img). Этого обычно бывает достаточно для замены. Однако если необходима более тонкая система, на помощь вам придут все возможности JS. Вы можете создать по событию error при загрузке изображения функцию, которая будет добавлять определенное описание (при помощи любого элемента), как вариант. Подобное описал @Petroveg в ответе выше.

Answer 3

[Виталий Желтяков]

Берёте div, с котором написан ваш alt-текст (можно задать стиль тексту). Поверх этого текста через z-index устанавливаете ваше изображение. Размеры div и img одинаковые. При загрузке изображения пользователь видит текст в div-е, после загрузки видит само изображение. Верстка не ломается. В принципе, можно даже написать небольшой скриптик реализующий это.

Answer 4

[WiKiTik]

Имеется необходимость в просмотре кодов Emoji-смайлов в постах ВКонтакте. Например, вот пост:
vk.com/wall-124855981_31288
В коде страницы нужные нам коды записаны в атрибуты Alt. Через Tampermonkey запустил указанный выше скрипт:

$('img').each(function () {
  $(this).replaceWith($('<span>').html($(this).attr('alt')));
});

К сожалению, он не работает. Не подскажете, что нужно изменить в скрипте, чтобы вместо изображения показывался alt-"text"?
P.S. В javascript/jquery я полный ноль)

Comments

[WiKiTik]

Решение вопроса можно посмотреть здесь: Как показывать alt изображения текстом в ВК?